Skip to content

Instantly share code, notes, and snippets.

@rsgranne
Last active Nov 28, 2017
Embed
What would you like to do?
Layout Methods home page
<h2>HTML <code>&lt;table&gt;</code></h2>
<p>
No CSS. All layout done with HTML only. Wide usage of 1×1 pixel GIFs for “border” &amp; spacing. Lots of extra HTML &amp; presentational markup in HTML. Can’t use HTML5 DTD, because it doesn’t allow attributes you need for using tables for layout.
</p>
<p>
Crude &amp; very limited. Can’t set border on certain cells, or certain sides of cells, only for table as a whole. Cellpadding affects all cells equally.
</p>
<p>
And of course, not semantically correct to use <code>&lt;table></code> for layout, because it is <em>not</em> tabular data!
</p>
<p>
For a while in the late ’90s &amp; early 2000s developers used tables with CSS, so there wasn’t as much HTML (far fewer attributes), but that was putting lipstick on a pig.
</p>
<p>
<a href="tables.html">Step back in time…</a>
</p>
<h2>CSS <code>float</code> property</h2>
<p>
Using <code>float</code> for layout is a hack, as float was designed to move boxes to the right or left so that text could then wrap around them.
</p>
<p>
The <code>float</code> property introduces a lot of complexity. Floating a box disables margin collapsing, while anything that wraps around it still uses margin collapsing, so things don’t line up correctly. Have to set width on floated boxes (or use implied width of an <code>&lt;img></code>) or it doesn’t work correctly. Have to remember to use <code>clear</code> on items you do not want to wrap.
</p>
<p>
<a href="float.html">Check out the hack</a> that launched 1000 webpages…
</p>
<h2>CSS <code>display: table-cell</code></h2>
<p>
Lots of positives: nothing added to HTML. Pretty simple CSS. Can use full power of CSS. All cells snap to same height on their grid. Overall, this is a very good solution.
</p>
<p>
However, IE 8 &amp; older versions of Safari need extra code to work.
</p>
<p>
<a href="table-display.html">Understand a method</a> that still works very well…
</p>
<h2>CSS flexbox</h2>
<p>
The current method, supported in all modern Web browsers. Much more flexibility &amp; control. Gaining widespread popularity among developers, as it solves so many problems &amp; makes easy &amp; even possible the things that were previously difficult or impossible.
</p>
<p>
Doesn’t work at all in old browsers. To get decent (wide) support, you still need to use vendor prefixes (<code>-moz-</code>, <code>-webkit-</code>, <code>-ms-</code>). Conceptually more complex, &amp; functionally more complex, because there are more possibilities to work with.
</p>
<p>
<a href="flexbox.html">Experience the new hotness…</a>
</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment