469,327 Members | 1,265 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,327 developers. It's quick & easy.

Overlapping div-col's if using percentages

I've got a 3-column layout using percentages to define width of each
div-column.

#left-col { width: 20%; background-color: green; float:left; }
#center-col { width: 60%; background-color: blue; float:left; }
#right-col { width: 20%; background-color: green; float:left; }

Problem I find is if the combined content of all 3 columns happens to be
wider than the total size of the browser window the div's don't get stacked
on top of each other as they would if using fixed pixel width for each
column, but instead they overlap. Is there a way around this and still use
percentages? So if combined width's of the 3 colums exceeds total width of
the window to somehow force otherwise overlapping div's to stack vertically?

<div id="left-col">
Hail to the sun god
He sure is a fun god
Ra! Ra! Ra!
<img src="a400pixwidthimage.gif">
</div>

<div id="center-col">
<img src="a200pixwidthimage.gif">
To get something done, a committee should consist of no more than three
men, two of them absent.
</div>

<div id="right-col">
<img src="a100pixwidthimage.gif">
Ten years of rejection slips is nature's way of telling you to stop
writing. -- R. Geis
</div>
Jul 21 '05 #1
0 2863

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Kalvin | last post: by
6 posts views Thread by Gernot Frisch | last post: by
1 post views Thread by spolsky | last post: by
3 posts views Thread by =?Utf-8?B?c3Jpbml2YXM=?= | last post: by
5 posts views Thread by jzeil | last post: by
reply views Thread by Shawn Northrop | last post: by
reply views Thread by richard12345 | last post: by
2 posts views Thread by manugm1987 | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by haryvincent176 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.