Monthly Archives: March 2011

CSS : clear floats

Posted on by

Elements following a floated element will wrap around the floated element. To disable wrapping, you can apply the “clear” property to these following elements. The standard method is to place a complete “cleared” element last in the container :

<div style="clear:both;"></div>

To clear CSS floats without this extra markup you can use the following techniques :

  • Float the container as well
  • Use overflow: hidden on the container
  • Generate content using the :after CSS pseudo-class

A very detailed tutorial about Floats has been published by Vitaly Friedman, editor-in-chief of the Smashing Magazine.

Other useful tutorials are :

HTML5 : block-level and inline elements

Posted on by

Block-level elements like (<div>, <pre>, <p>, <ul>, <ol>, <li>,… ) take up the entire width of their containing element and the height of the default line-height. They stack up underneath each other, top-to-bottom.

Inline elements like (<img>, <em>, <strong>, <a>, <span>, …) are in-line. They stack up next to each other, left-to-right.

All HTML block-level elements have five spacing properties: height, width, padding, border and margin. In the HTML box-model, the width of padding, border and margin are added to the width of the content area.

Applying float to an element will automatically make it a block-level element.