Flexible ("Responsive") layout issue once float breaks

I have a two column layout with wrapper, header, main container, content area, sidebar and footer.

The structure is:


<!DOCTYPE html>
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<style type="text/css">
.wrapper {margin:0 auto;max-width:960px;border:1px solid #777;overflow:hidden;}
.content {width:70%;border:1px solid red;float:left;overflow:hidden;min-width:100px;}
.sidebar {width:29%;border:1px solid green;float:right;overflow:hidden;}
.clear {clear:both;}
@media only screen
and (max-width : 800px) {
.content, .sidebar {float:none;width:100%;}
}

</style>
<html>
<body>
<div class="wrapper">
	<div class="header">header stuff</div>
	<div class="main">
		<div class="content">Main content area. This is the main content area. if it has more text that can fit, then it will display.</div>
		<div class="sidebar">Sidebar content here</div>
		<div class="clear">clear the footer</div>
		<div class="footer">footer goes here</div>
	</div>
</div>
</body>
</html>

I’ve got the content area set to float left and the sidebar set to float right. The wrapper div is set to max-width:960px.

The content is set to width:70% with float:left and the sidebar is set to 29% (not sure why it can’t be 30% but it breaks the float) with a float:right.

My problem is:

Once I reduce the browser width to a certain point, the float breaks as expected, but the content area is still 70% of the available width.

How can I establish a point at which the content and sidabar are both 100% of the available width?

The reason the floats can’t afford to add up to 100% width is that the % has to be translated into pixels, and depending on how the browser does that calculation, you may sometimes get slightly more that 100% width.

You can use media queries to change widths to 100% on small screens. For example, if you reduce your browser window to under 800px width, the content and sidebar will turn to 100% width:


<!DOCTYPE html>
<style type="text/css">
.wrapper {margin:0 auto;max-width:960px;border:1px solid #777}
.content {width:70%;border:1px solid red;float:left;}
.sidebar {width:29%;border:1px solid green;float:right;}
.clear {clear:both;}

[COLOR="#FF0000"]@media only screen
and (max-width : 800px) {
.content, .sidebar {float: none; width: 100%;}
}[/COLOR]

</style>
<html>
<body>
<div class="wrapper">
	<div class="header">header stuff</div>
	<div class="main">
		<div class="content">Main content area</div>
		<div class="sidebar">Sidebar content here</div>
		<div class="clear">clear the footer</div>
		<div class="footer">footer goes here</div>
	</div>
</div>
</body>
</html>

The media queries are different for different devices. There is a nice list of them here:

PS: the float drop may also have been caused by the border on the columns, which adds to the width.

Thanks for that Ralph! That helps lots.

Any idea why, in Firefox only, when I reduce the size of the browser, the contents of the “content” div will not wrap to allow the div to collapse to the size of the browser?

Not quite sure what you mean there. Do you have an example with content in it? Are you talking about the @media version?

Yes, I’m on the right track with the @media version, but the next problem I’m trying to figure out, even with this version, is why, in Firefox, as I reduce the width of the browser, and at the point I reach the “y” in “display”, the content no longer collapses. It acts as though it had a white-space:no-wrap attribute on it.

If you will load that content into an empty text file, save it as test.html, for example, and then resize the window, you should see that the content does not wrap as expected as the browser width decreases beyond that point.

Firefox doesn’t let you reduce the browser window to under about 600px. It’s the same for me in either of the cases you describe. Is that what you mean?

Yes, exactly.

Ah well, there’s nothing you can do about that. That’s just how Firefox works. Realistically, there’s not a lot of use in having your desktop browser set to less that 600px wide. If you want to test at a narrower range, just use a different browser like Opera.

I agree. Now that I know its a browser limitation and not a flaw in my code, I’m good. Thanks very much for the media query tip.

You’re welcome. I have a lot to learn about media queries, but they certainly are fun to play around with. The css-tricks link above is very handy, as it can be a bit confusing working out how to target the various devices that recognize media queries.