Web development world changes very rapidly. Since this article was written, the Flex Box Layout has gained wide adoption in browsers. This article hasn’t been updated to reflect more more modern practices.
Understanding CSS layouts is important. If you don’t you would take 2x or even 4x time to implement them, if you do implement them right. And its super simple to learn with a few patterns knowing which would take you a long way. We will start from the basics before covering more detail.
The Border Box Model
I think we all know this by now, but for sake of completeness, the actual rendered width of a box is the sum of its width, padding and borders. For IE-6 in quirks mode it was was different, but you seriously shouldn’t be designing for IE-6 now and definitely not use quirks mode. For more details on how it is supposed to work, you should read the W3 spec at http://www.w3.org/TR/CSS2/box.html. BTW, the w3 spec tell you how it is supposed to work, and not how the different browser vendors have implemented it. In this case however, the implementation is exactly what is speced, except for the IE-6 case already mentioned earlier. Also, you can change the box-sizing model. We will discuss use-cases where you might want to do that later.
Types of Boxes
Now there used to be two types of boxes, inline and block. Inline isn’t really a box. It can’t have a width or a height and its more like flowing content from left to right. If you have two inline boxes one after the other, They follow each other until the space is available and then wrap around. In that, they behave like normal text. The dimensions of an inline box is the dimension of the content inside it. A block box however takes the full width available to it, which is the width of it’s parent (minus the padding and border of-course). Now there are multiple other types of boxes (with some browser quirks). For the complete list see – http://www.w3.org/wiki/CSS/Properties/display. The only other one we need to worry about right now is display inline-block. It is like inline as it lays out from left to right and by default takes only as much space as it’s content. Its like block in that you are allowed to set the width and height for it. This comes in very useful when laying out stuff. The good news is that we can simulate inline-block in IE with css properties
display:inline;*zoom:1;. That is super useful in layouts and there are grid systems which use it for that purpose – http://yuilibrary.com/yui/docs/cssgrids/.
Floats & Clear
The only other way to layout, apart from inline-block is floats. Until some time before, it was super hard to implement correctly with-out using extra markup. But things are better now. But first what does float do. A float tells the box to shift to left, or to right and makes it take only as much space as required by the content inside it, but you can also set its width. You can see now why float was used for layout until inline-box came through. However, float moves the box out of the “rendering flow”. What it means is that non-floated boxes are rendered as-if the float wasn’t present, but the inside them can’t take the space taken by float. Take a look at the following fiddle for illustration – http://jsfiddle.net/xHA3X/1/. Now if we have multiple floats, they go one beside the other, left or right depending on float value. However, we can also specify a property clear to break that behavior. If a style
clear:left is set, there are no floats allowed on the left of the div. If
clear:right is no, no right floated elements are allowed on right and the div in question goes after all the right floated elements. However, if
clear:both is used, the element lives in it’s own row, disallowing any left or right floated element.
Since the floated element is out-of-flow, its parent element collapses and isn’t given any height. That is usually not desirable and a clearfix hack is used. The way it works is that an additional element is introduced as the last child of the parent element with
clear:both. This makes sure that the last child is placed at the end of the parent div, causing it to stretch and hence having a proper height.
Float is by far one of the most complicated concepts to understand. This fiddler above demonstrates most of the concepts – http://jsfiddle.net/xHA3X/2/. Try to apply
clear:both to the various child divs to see how they behave. Also un-comment the clearfix to see how the height of the parent div increases.
There are four types of position – static, relative, fixed and absolute. Static is the default and it means the element isn’t positioned at all. The positioning properties like left, top, bottom, right etc. won’t work on a statically positioned element. If the element is positioned relative, they would work and the reference used for them would be the position where the element was e.g. if you say top:100px, the element goes 100px below where it was supposed to be. Same works with left. The values can also be negative in which case the element would be pulled out. The interesting thing to note here is that the elements proceeding or succeeding the relatively moved element don’t show any effect of the movement.
Fixed and absolute are similar except that fixed users the viewport as a base, while absolute uses the closest positioned parent as a base to calculate the co-ordinates. For more details, check the spec – http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme
So that was all the theory we needed to go through before talking about the more interesting examples and layouts like the holy grail equal height columns, tabular layouts, grid based layouts, vertically middle aligned layouts, Center aligned layouts, using pseudo elements to avoid dirtying markup for layout, why two boxes layout is a preferred technique etc. Do add comments if there are other layout topics you might be interested in.