CSS: Boxes and horizontal scrollbar

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

CSS: Boxes and horizontal scrollbar

Post 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 ;)
User avatar
JAM
DevNet Resident
Posts: 2101
Joined: Fri Aug 08, 2003 6:53 pm
Location: Sweden
Contact:

Post 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.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post 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?
McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

Post 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.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

Alright, thanks guys.
Post Reply