Forum Moderators: not2easy
First time posting, and I've spent a good while on this problem, and have come with no real solution. I have a site in-progress being built which I'm using floats to organize with. There are two main floats, and two nested floats inside the right float.
When the browser is properly sized or larger, the content responds as I expect it to. And when the window shrinks it starts to push down the nested floats below the left float (as I expect it to) up until the point in which the nested right most float is pushed below the left float. At this point, it leaves a large white space gap that could easily fit the nested right most float.
My goal is to allow the nested right most float to fill the newly created void, rather than pushing itself to the line below the left float.
Below is the relevant code:
* {
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: small;
font-family: "arial";
}
#leftist {
float: left;
width: 15%;
max-width: 11em;
min-width: 8em;
}
#hrcontent {
float: right;
width: 85%;
}
.tbox {
float: right;
width: 30%;
min-width: 15em;
border: 1px solid #214263;
border-bottom: 7px solid #214263;
}
.sbox {
float: left;
width: 69%;
border: 1px solid #214263;
border-bottom: 7px solid #214263;
}
</style>
<body>
<div id="leftist">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="hrcontent">
<div class="tbox">
<h3>data</h3><br />
<h4>data</h4>
<h5>data</h5><a href="#">link</a>
</div>
<div class="sbox">
<h1>data</h1>
<h4>data</h4>
<p>data</p>
<h5>data</h5><a href="#">link</a>
<h4>data</h4>
<p>data</p>
<h5>data</h5><a href="#">link</a>
</div>
<div id="clearing"></div>
</div>
Is there anything in the specs that describes anything close to that kind of "un-nesting" behavior?
One thing I'm wondering, is why you float the float container (#hrcontent) to the right, instead of to the left. By floating it to the right, you're making it pointless to give a max-width to the navigation bar, because once it hits it's max width, it will just leave a gap there, instead of the float container being beside it.
I don't see how your current design can really work... is it really okay that the divs bump down when the window gets small? Using floats as they are, with percentages and min/max widths, you can't get anything to go together. IE6 doesn't even support min/max widths, so what would you do there?
I think the main thing you need that you don't have, is a min-width for your entire page, so that instead of divs bumping, or stuff overlapping, the page will scroll when it hits min width.
I have a basic page layout here, but it's very modified from your original code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>your example</title>
<style type="text/css">
* {margin:0;padding:0;
font-family: "arial";
}
#wrapper{min-width:50em}
#leftist {
float: left;
width: 15%;
min-width:7.5em;
}
.tbox {
float: right;
width: 25.5%;
min-width: 12.75em;
border: 1px solid #214263;
border-bottom: 7px solid #214263;
}
.sbox {margin-left:15%;
margin-right:25.5%;
border: 1px solid #214263;
border-bottom: 7px solid #214263;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftist">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div class="tbox">
<h3>data</h3><br />
<h4>data</h4>
<h5>data</h5><a href="#">link</a>
</div>
<div class="sbox">
<h1>data</h1>
<h4>data</h4>
<p>data</p>
<h5>data</h5><a href="#">link</a>
<h4>data</h4>
<p>data</p>
<h5>data</h5><a href="#">link</a>
</div>
<div id="clearing"></div>
</div>
</body>
</html>
Having the divs push under each other is the over-all goal but the big problem is between the minimum width (320px) and the minimum full screen view (around 600px) there is a lot of whitespace.
Two things I want to do with the white space, for starters at a certain point it is large enough to fit the minimum size of a box, but the box won't squeeze to that size until later (due to %s). Second, I want the boxes to fill the whitespace when it can. I can't figure out a way to make a box re-expand into the empty space once it has already shrunk to fit other boxes.
I think there has to be a way to keep the box stretchable when the browser size is taken to the extreme, as well as shrinkable to a minimum before it carriage returns, and once it has shifted down to then resume a larger size that takes up the rest of the real estate available.
Anyone know of anything like this?
IE6 is unique, I'm writing a separate style sheet for it entirely.
