Web Standards Tips

Practical advice for building websites with web standards

Web Standards Tips: layout

You are currently browsing the Web Standards Tips archives for the tag layout.

The empty div clearfix anti-pattern

By Isofarro on March 8th, 2010 - No comments

The common approach to laying out a page is through the use of float. A container floated left becomes a left-hand sidebar. And even within components of a page, the float is used to create columnar layouts. The symptom of float-based layouts One of the side-effects of using floats for layout is that the element [...]

Filed in CSS Tagged with , , , , , ,

CSS shorthands for margin and paddings

By Isofarro on June 14th, 2009 - No comments

The typical way of setting margins and paddings involve specifiying a value for each of the top, right, bottom and left in sequence. Depending on the situation, we can use shorthand values for both optimisation and clarity, but sometimes it isn’t always clear. Note: Using file size optimisation as a basis for a styleguide for [...]

Easy clearing of floats

By Isofarro on November 18th, 2008 - 2 comments

One of the main methods of creating stable layouts is to ensure that elements that contain floated elements clear these floats. Given an element with an id of wrapper, the styles needed to easy clear any contained floats is: #wrapper:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } #wrapper { zoom: [...]

Copyright © 2007 - 2009, isolani