PDA

Click to See Complete Forum and Search --> : Stopping divs from wrapping on browser resize

ZeroFear
07-18-2006, 11:29 PM
First view the example page: http://fantasykickoff.com, and then resize the browser to a small size, watch what happens to the colored squares.

Now for the question: Is there a way to make the red, yellow and blue squares not wrap when the browser is resized. Instead of the page becoming a jumbled mess i would like a scroll bar to appear when it gets too tiny. I have asked several others and they all suggested the min-width and absolute positioning solutions, but i cant use these in this situation. It would take too long to explain why i cant use those two solutions.

Is there any way to stop the page from geting messed up besides the things ive already listed? Any CSS gurus out there with the answer??
Fang
07-19-2006, 01:26 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>FKOFF_LAYOUT</title>

<style type="text/css">
div {
border: 1px solid black;
}
img {
border: none;
}
</style></head><body style="margin: 0pt;width:652px;">
<div style="float: left;">
<div style="text-align: right; white-space: nowrap;">
<a href=""><img src="FKOFF_LAYOUT_files/logo.jpg" alt="fantasykickoff.com"></a>
<img src="FKOFF_LAYOUT_files/countdown.jpg" alt="countdown">
</div>
<div style="float: left; background-image: url(img/spiral.gif); background-repeat: repeat-y; padding-left: 15px;">
<div style="background-color: orange; height: 30px;width:604px"></div>
<div style="float: left; background-color: red; width: 200px; height: 320px;"></div>
<div style="float: left; background-color: blue; width: 200px; height: 320px;"></div>
<div style="float: left; background-color: yellow; width: 200px; height: 320px;"></div>
<div style="float: right; width: 25px;margin-top:-33px;">
<a href=""><img src="FKOFF_LAYOUT_files/weekly_tab_on.gif" alt="Weekly"></a><a href=""><img style="margin-top: -4px;" src="FKOFF_LAYOUT_files/season_tab.gif" alt="Season"></a><a href=""><img style="margin-top: -5px;" src="FKOFF_LAYOUT_files/profile_tab.gif" alt="Profile"></a>
</div>
</div>
</div>
</body></html>
ZeroFear
07-19-2006, 01:46 PM
I would rather not set a width to the parent div because the inner divs will be on varying widths. My example has them at 200px, but in reality, they'll vary from page to page. I would like the parent div to be as wide as minimally possible.
Mr_Threepwood
07-19-2006, 01:51 PM
Have you tried setting the parent divs width to 100%, and then making each other division 33%?