472,101 Members | 1,478 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,101 software developers and data experts.

Overlapping div-col's if using percentages

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

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

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

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.