Back to Post: New Solution To A Real Responsive Layout Problem

Below is the solution to the responsive layout problem I was having. For a full explanation of the problem please see the original post. An Attempted Solution To A Real Responsive Layout Problem and the demo page I created for that post.

The gist of the problem with my prior solution was that it required a non-flexible workaround to position some of the sidebar boxes, specifically a margin-top on the rss box. What's below corrects that problem and allows the sidebar boxes to be positioned dynamically.

Header
Post Title
Post Content
Post Comments

Below is the html I'm using in these examples. There are two things to note when compared to the last demo. First is that here I've switched to using html5 semantics since it more closely reflects the code being used on the real site.

Second and more importantly for this solution is the new wrapper div (shown with the gray outline) that contains the post article, the rss box, and the series box. This new div is what makes the solution possible as it allows the boxes inside the article to affect the rss and series boxes when they're floated.

  <div id="wrapper">
    <article class="article">
      <div id="title" class="box title">Post Title</div>
      <aside id="meta" class="box meta">Post Meta</aside>
      <section id="content" class="box content">Post Content</section>
    </article>
	
    <aside id="rss" class="box rss">RSS</aside>
    <aside id="series" class="box series">Series Links</aside>
  </div>
	
  <div id="comments" class="box comments">Post Comments</div>
  <footer class="box footer">Footer</footer>


Header
Post Title
Post Content
Post Comments

Here's the css I'm using to create the example above. The most important thing to note is that I'm not floating the entire article to the right, but rather just the meta content section.

This allows the rss (and series) box to slide up to the top of the content box, but not above the bottom of the post meta box. The post meta box has been floated left and given a negative left margin to pull it into the sidebar.

The rss box is cleared left and since both it and the post meta box are located inside the same container (wrapping div) the rss box remains below and positions itself dynamically as the post meta box changes heights.

#wrapper {
  width: 65%;
  float: right;
  outline: 1px solid silver
}

header {
  width: 100%;
}

article {
  width:98%;
  margin-left: 1%;
}

#title {
  width: 98%;
  margin-left: 1%
}

#meta {
  width: 52%;
  float: left;
  margin: 0 0 0 -56%
}

#content {
  width: 100%;
  float: right
}

#rss {
  width: 51%;
  float:left;
  margin: 2% 0 0 -54%;
  clear: left
}

#series {
  width: 51%;
  float:left;
  clear: left;
  margin: 2% 0 0 -54%
}

#comments {
  float:right;
  width: 65%;
}

footer {
  float:left;
  width: 100%;
}

For more details please visit either of the 2 posts describing the problem I've been trying to solve as well as the demo to the original post