Back to Post: An Attempted Solution To A Real Responsive Layout Problem

The examples below are to show several steps in changing a single column layout to a two column layout using the same html structure for a responsive design I'm working on.

For a more detailed explanation please visit the post linked to above.

Header
Post Title
Post Meta
Post Content
RSS
Series Links
Post Comments

The html below is a simplified version of what's being used. If you view the source code you'll see the ids are different and there are some classes present. In the real world problem the divs are articles, sections, and asides, and other html5 semantic elements.

I've simplified the code below to make it easier to understand what's going on.

<div>
  <div id="header">Header</div>
  <div id="article">
    <div id="title">Post Title</div>
    <div id="meta">Post Meta</div>
    <div id="content">Post Content</div>
  </div>
  <div id="rss">RSS</div>
  <div id="series">Series Links</div>
  <div id="comments">Comments</div>
  <div id="footer">Footer</div>
</div>

Other than giving the boxes above heights, and adding the colored outlines, no css is necessary to achieve this single column layout. The html used is the same for all the examples below.


Header
Post Title
Post Meta
Post Content
RSS
Series Links
Post Comments

To set up the second column I gave some containers widths and floated different boxes left and right as appropriate.

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

#rss {
  width: 31%;
  float:left
}

#series {
  width: 31%;
  float:left
}

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

Header
Post Title
Post Meta
Post Content
RSS
Series Links
Post Comments

To slide the meta post box out of its container and into the sidebar, I floated it to the left, added a width, and gave it a negative left margin.

#meta {
  float:left;
  width: 48%;
  margin:0 0 0 -51%;
}

Header
Post Title
Post Meta
Post Content
RSS
Series Links
Post Comments

In order to push the rss and series boxes down I added a top margin to the rss box.

#rss {
  width: 31%;
  float:left;
  margin-top: 30%;
}

Unfortunately this is not a flexible solution as described in the post. The simple explanation is that the specific margin given to the rss box will need to be adjusted as the height of the post title and post meta boxes changes.

A new solution or different html structure will likely need to be used. I present the current solution mainly to show a real world problem and attempt at a solution.