Amanda,
Have you set a percentage width for the 3 divs and put them in a separate
div? The problem is that when the divs expand to the width of the
viewport(screen) the next element is automatically moved down to a space
where it will fit. Things should not scroll outside the viewport with css as
long as the viewport is full screen size. A really good resource for this
is http://www.richinstyle.com/proposals/floatproposal.html.
You might want to try something like this:
<div id="main">
<div class="left">this<br />is<br />the<br />left</div>
<div class="center">this is</br >the<br /> middle</div>
<div class="right">and<br />this<br />is<br />the<br />right</div>
</div>
The style is:
#main{width:100%;
float: right;border:1px solid green;}
.left{border: red solid 1px;
color:red;
float:left;
width:31%;}
.center{border: blue solid 1px;
color:blue;
float:left;
width:31%;}
.right{border: green solid 1px;
color:green;
float:left;
width:31%;}
It seems to be better to leave the total a little short of 100% for browser
problems. You may have to adjust the widths. And you'll probably need to
follow it with a <div clear="both"></div>. I tend to use borders when laying
this stuff out so I can see what's going on.
andy
-----Original Message-----
From: Amanda Birmingham [mailto:[EMAIL PROTECTED]]
Sent: Thursday, August 15, 2002 5:06 PM
To: [EMAIL PROTECTED]
Subject: [wdvltalk] CSS help w/ "float"ing divs?
Hi, List,
I'm working on trying out a table-less design, and have hit a bit of a snag
:) I have what would be a three-column, single row table, only now I'm
trying to render it using left-floated divs rather than cells.
When the contents of the divs are short, that works great. However, when
one of the divs get wide, it pushes everything after it down to the next
line. What I *want* it to do is what a table would do ... just expand the
row off the edge of the screen and cause the browser to add a horizontal
scroll bar.
I tried putting in absolute positioning requiring the top of each div to be
at 0px ... however, then they all overlapped instead of floating next to
each other (because absolute positioning takes elements out of the layout
flow, right?) Can anyone tell me how to keep them all on one line?
Thanks,
Amanda
____ * The WDVL Discussion List from WDVL.COM * ____
To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
Send Your Posts To: [EMAIL PROTECTED]
To change subscription settings to the wdvltalk digest version:
http://wdvl.internet.com/WDVL/Forum/#sub
________________ http://www.wdvl.com _______________________
You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
To unsubscribe send a blank email to %%email.unsub%%
____ � The WDVL Discussion List from WDVL.COM � ____
To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
Send Your Posts To: [EMAIL PROTECTED]
To change subscription settings to the wdvltalk digest version:
http://wdvl.internet.com/WDVL/Forum/#sub
________________ http://www.wdvl.com _______________________
You are currently subscribed to wdvltalk as: [email protected]
To unsubscribe send a blank email to [EMAIL PROTECTED]
