By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,911 Members | 1,195 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,911 IT Pros & Developers. It's quick & easy.

Overlapping div-col's if using percentages

P: n/a
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
Share this question for a faster answer!
Share on Google+

This discussion thread is closed

Replies have been disabled for this discussion.