CSS Layouts Basics

Sripathi Krishnan

22 Mar 2015

CSS Layouts Basics

Understanding CSS layouts are 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 with 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 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 tells 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 expected, 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 it is more like flowing content from left to right. If you have two inline boxes one after the other, They follow each other until space is available and then wrap around. In that, they behave like normal text. The dimensions of an inline box are the dimension of the content inside it. A block box, however, takes the full width available to it, which is the width of its 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 displays 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 without 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, the 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 the 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 its 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:leftclear:rightclear: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.

Positioning

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 the 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 moving 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 coordinates. For more details, check the spec – http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme

Editor

Web development world changes rapidly. Since this article was written, the Flex Box Layout has gained wide adoption in browsers and should be used for creating layouts like equal height columns, tabular layouts, grid-based layouts, vertically middle aligned layouts, centre aligned layouts etc.


Have a question?

Need Technology advice?

Connect

+1 669 253 9011

contact@hashedin.com

facebook twitter linkedIn youtube