Page 1 of 1

CSS: Boxes and horizontal scrollbar

Posted: Mon Oct 13, 2003 7:30 pm
by nigma
Say you have two div boxes, one floated left, the other floated right.

Box1

Code: Select all

#box1 {
float: left;
}
Box2

Code: Select all

#box2 {
float: right;
width: 300px;
}
And then say you have many paragraphs in Box1; when a person views the page with a resolution of 800x600 (or maybe even a bit larger) Box2 drops below Box1. Anyone know how to set things up so that Box2 will always be to the left of Box1 without having a horizontal scrollbar appear when the browser window is maximized?

I might not know what I am talking about, if you think that is the case then please speak up so I don't go making a fool of myself to other people ;)

Posted: Mon Oct 13, 2003 7:54 pm
by JAM
Not entirely sure I'm reading correct here, but... If you change...

Code: Select all

#box1 {
    position: absolute; /* add this */
    float: left;
}
...you get a different result. Not sure this is what you want. Look up positioning in your favourite CSS cookbook for more info.

Posted: Mon Oct 13, 2003 8:26 pm
by nigma
Thanks JAM, that does it. Now, box1's content overlaps Box2's content, I know you can change this using the z-index attribute BUT is there a way to make box2 not start till the end of box1? So there would be maybe a space in-between the two boxes?

Posted: Mon Oct 13, 2003 9:41 pm
by McGruff
Use position and width attributes, eg:


#box1 {
position: absolute;
left: 0px;
top: 0px;
width: 100px;
}

#box2 {
position: absolute;
right: 0px;
top: 0px;
width: 100px;
}

At some point the boxes will collide though, when the window is reduced in size.

Posted: Mon Oct 13, 2003 10:24 pm
by nigma
Alright, thanks guys.