Just a quick starter for building a responsive 2-column layout using HTML5 and CSS3 media queries. The key here is progressive enhancement; we start with a stacked layout that will work and is designed for any screen size then we progressively enhance this to add columns to the navigation and aside for wider screens and eventually move the aside to the right of the article content as the line length in the content gets too long and the screen width allows. One thing to notice is that the padding is moved from the outer container (article, aside) in the stacked layout to the child elements in the side-by-side layout.
First the HTML, nothing special here really.
<!DOCTYPE html><html><head><title>Test responsive layout</title><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /><link rel="stylesheet/less" type="text/css" href="screen.less" /><script src="less-1.3.0.min.js" type="text/javascript"></script></head><body><div id="banner"><h1>Real web developers</h1></div><nav id="primaryNav"><ul><li>Primary nav one</li><li>Primary nav two</li><li>Primary nav three</li><li>Primary nav four</li><!--<li>Primary nav five</li>--></ul></nav><div id="mainContent"><article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a purus eget diam tempus consectetur. Curabitur commodo mi lacinia elit placerat non facilisis nibh vestibulum. Aenean placerat felis ut sapien facilisis vitae fermentum purus molestie. Pellentesque lorem magna, placerat a mattis quis, sagittis quis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent non nisi massa. Etiam lobortis sodales tristique. Fusce placerat elementum placerat. Praesent venenatis dignissim lectus id semper. Ut sagittis tellus ac odio iaculis eget semper est porttitor. Ut et metus eros, commodo laoreet ligula. Donec malesuada tristique sagittis. Quisque fringilla mi id orci eleifend ultrices. Maecenas ac tellus odio, id dignissim dui. Sed urna eros, facilisis et tincidunt in, lobortis eu dui. Vestibulum fermentum sollicitudin molestie.</p><p>Donec lobortis aliquet lacus, eget pellentesque velit lobortis ut. Nunc scelerisque consectetur dignissim. Duis fermentum iaculis sapien in consectetur. Cras est nibh, consequat a molestie eu, dictum malesuada urna. Nunc volutpat, mauris laoreet ornare hendrerit, enim lorem bibendum nulla, a luctus dolor mi id lacus. Pellentesque interdum nisl sit amet elit posuere rhoncus. Suspendisse potenti. Nulla mi nulla, ultricies at fermentum eget, aliquet et dolor. Quisque ultricies luctus arcu, quis sollicitudin arcu lacinia ut. Nullam bibendum pretium velit. Nunc leo metus, vehicula cursus mattis eget, tincidunt vitae urna.</p><p>Curabitur sagittis, ligula vel euismod lobortis, nibh felis tincidunt metus, ac gravida tortor nibh eget ligula. Nullam a erat neque, sit amet bibendum lorem. Aliquam vel urna a est convallis semper id in sem. Integer volutpat tristique nisi, id tincidunt diam pretium et. Nunc lorem libero, vulputate dignissim molestie a, pharetra eu ante. Etiam et enim molestie dolor lacinia pharetra. Duis libero nisl, eleifend eu bibendum quis, cursus at est. Nulla adipiscing nulla quis libero tincidunt ac fermentum augue ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque in sapien justo, eu imperdiet sapien. Donec auctor leo nec neque convallis placerat.</p><p>Suspendisse adipiscing, dui id tempus semper, purus elit blandit massa, nec aliquam ipsum urna vehicula lectus. Morbi purus ante, mollis in convallis ac, aliquet ac ligula. Morbi nec nulla nunc, vitae dictum neque. Nullam molestie velit at enim sollicitudin condimentum. Ut in sem purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus euismod aliquam leo, non varius nibh ornare quis. Morbi a nulla odio. Maecenas nec leo eget libero mollis sodales in sed mi. Nulla facilisi. Mauris eu urna arcu. Pellentesque eget urna vitae quam feugiat fringilla. Vestibulum tellus justo, feugiat in egestas ac, aliquet sed massa. Aliquam erat volutpat. Phasellus sagittis, mi eu semper luctus, turpis nulla facilisis erat, non bibendum lacus velit id lectus.</p><p>Phasellus pharetra scelerisque elit et eleifend. Phasellus feugiat ultrices ipsum vitae scelerisque. Nullam bibendum lorem eget metus tristique molestie posuere purus tempus. Vivamus odio nisi, facilisis id sollicitudin sit amet, rhoncus in nisl. Praesent dignissim mauris in ante mollis vestibulum. Maecenas molestie lectus nec tellus volutpat placerat. Praesent lacinia sem in sem tempus non egestas ligula scelerisque. Nulla venenatis commodo sapien. Pellentesque in lectus justo. Fusce luctus eleifend purus, eu molestie velit consectetur at. Nullam semper auctor egestas. Quisque posuere ipsum nulla, vel ullamcorper lacus. Aenean porttitor dapibus scelerisque. Suspendisse potenti. Sed sed nibh ac mauris aliquet scelerisque a ac sapien. Pellentesque interdum nulla ac dui gravida luctus.</p></article></div><aside id="secondaryItems"><ul><li>Secondary item one</li><li>Secondary item two</li><li>Secondary item three</li><li>Secondary item four</li><li>Secondary item five</li><li>Secondary item six</li><li>Secondary item seven</li><li>Secondary item eight</li></ul></aside><div id="footer">© Real web developers limited.</div></body></html>
Next the CSS
* { border: 0; line-height: 1.2; margin: 0; padding: 0; }
body { font-size: 100%; }
body * { font-size: 1em; font-weight: normal; }
li { list-style: none; }
p { padding-bottom: 10px; }
#banner, #primaryNav, #mainContent, #secondaryItems, #footer { padding: 10px; }
#banner { background-color: #fafafa; }
#primaryNav { background-color: #eaeaea; }
#mainContent { background-color: #dadada; }
#secondaryItems { background-color: #cacaca; }
@media screen and (min-width: 480px)
{
/* create 2 columns in the navigation and the aside ... and clear the floats */
#primaryNav li { float: left; width: 50%; }
#primaryNav:after { clear: both; content: '.'; display: block; height: 0; visibility: hidden; }
#mainContent { clear: both; }
#secondaryItems:after { clear: both; content: '.'; display: block; height: 0; visibility: hidden; }
#secondaryItems li { float: left; width: 50%; }
#footer { clear: both; }
}
@media screen and (min-width: 720px)
{
/* change to 3 columns in the navigation and the aside */
#primaryNav li { float: left; width: 33.3333%; }
#secondaryItems li { float: left; width: 33.3333%; }
}
@media screen and (min-width: 960px)
{
/* change to 4 columns in the navigation and the aside and 2 columns in the main section - the main content spans 3 columns */
#primaryNav li { float: left; width: 25%; }
#mainContent { float: left; padding: 0; width: 75%; } /* remove the padding from the container so it doesn't affect the width */
#mainContent article { margin: 10px; } /* put the padding on the child */
#secondaryItems { float: right; padding: 0; width: 25%; } /* remove the padding from the container so it doesn't affect the width */
#secondaryItems ul { margin: 10px; } /* put the padding on the child */
#secondaryItems li { float: none; width: 100%; }
}
@media screen and (min-width: 1200px)
{
/* change to five columns in the navigation and span 4 columns with the main content */
#primaryNav li { float: left; width: 20%; }
#mainContent { width: 80%; }
#secondaryItems { width: 20%; }
}
