× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Two Column Layout and Tradeoffs

Drew Winget
Jan 20, 2015
<p>There are many tutorials dealing with two-column layouts. The best general-purpose tutorial for layout concepts in CSS is "<a href="http://learnlayout.com/">learn layout</a>".</p> <p>For future reference, here is <a href="http://jsfiddle.net/1hnsfso4/5/">the layout we created</a> on jsFiddle.</p> <p>The main concept in this session was the idea of taking the left column out of "<a href="http://css-tricks.com/all-about-floats/">the flow</a>", and compensating for the gap left in the left by adding a margin on the right column.</p> <p>There are many tradeoffs in creating CSS layouts from scratch, and in deciding whether to use a grid system, and which one to use. Grid systems are powerful, but unless they are very fully featured and well-understood, they can often cause more problems than they solve. To understand them deeply, I recommend reading <a href="http://css-tricks.com/dont-overthink-it-grids/">Chris Coyer's</a> and <a href="http://j4n.co/blog/Creating-your-own-css-grid-system">Jan Drewniak's</a> explanations. </p>
comments powered by Disqus