Responsive layout problem

I’m still learning CSS, so there is probably an easy explanation for this.

The website I’m building is not too complex. It has a header section, then a content area and a sidebar. When viewed on a small screen, I would like that content stacked in the same order (header, then content, and then sidebar at the bottom).

Now here is the issue. You will see here that when the browser is resized, the side bar does not move to the bottom of the stack. This is happening because I have had to move the sidebar up in the HTML so that I can get it to float right beside the header. What makes this complicated is because the white background needs to be 100% width, but it also needs to move down as the intro pushes it down. So how can I float something to the right of something that has a width of 100%?

You need to see the link to understand.

Any tips, or even links to similar sites would be appreciated.



Yes, it’s not so easy to have a floated element like that coming before the content and then falling under it on narrow screens. Some new CSS layout models are coming soon that will make this easy, but in the mean time, workarounds have to be used.

Of course, you could just float the left column too, but then it wouldn’t fill out the remaining space.

Here is one example of how your situation can be dealt with:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}

body {font-size: 100%; line-height: 1.5; background: #30353b;}

.head-outer, .main-outer, .foot-outer {width: 100%;}
.head, .main, .foot {width: 95%; margin: 0 auto;}
.head, .foot {overflow: hidden;}
.main {overflow: auto;}

.head, .foot {min-height: 100px;}
.main {min-height: 600px;}

.main-outer {background: #fff;}
.main {padding: 1.25em 0;}

@media only screen and (min-width: 569px) {

	.content-outer {width: 100%; float: left; padding-bottom: 10px;}
	.content {padding-right: 20px; margin-right: 264px;}
	.content-wrap {border-right: 1px solid #e7e7e7; padding: 0 20px 2px 5px; min-height: 600px; overflow: hidden;}
	.sidebar {position: relative; float: left; width: 264px; margin: 0 0 0 -264px; padding: 0; border: none;}

@media only screen and (max-width : 568px) {



<div class="head-outer">
	<div class="head">

<div class="main-outer">
	<div class="main">
		<div class="content-outer">
		    <div class="content" role="main">
		    	<div class="content-wrap">
					<p>Content here</p>
				</div><!-- /content-wrap -->
			</div><!-- /content -->
		</div><!-- /content outer -->
		<div class="sidebar" role="complementary">
			<p>Sidebar content</p>
		</div><!-- /sidebar -->
	</div><!-- /main -->
</div><!-- /main-outer -->

<div class="foot-outer">
	<div class="foot" role="contentinfo">
	</div><!-- /foot -->
</div><!-- /foot-outer -->


Here’s a live example, too:

It looks like this works. Brilliant.


Cool. Let us know how you go integrating it. I’ve seen this done elsewhere, but can’t guarantee my version gets it exactly right. Anyhow, it’s a starting point. :slight_smile: