Ye olde masthead

Ye olde sidebar

Ye olde main content area

This is an example document related to the Quicklink post Simple Clearing of Floats. Please read the post for more information.

In this example, these two simple rules are applied to the div elements that contain the body text:

  1. .floatclear { overflow:hidden; }
  2. * html .floatclear { height:1%; }

The rules make the document byline clear any floats in the body text, but not the sidebars. I've floated a few image and div elements to make it easier to verify whether it works. Resize your windows, scale the text up and down, do what you can to break it, then post your findings in the comments.

Ut in magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing. Lorem ipsum dolor sit amet.

Ut in magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing. Lorem ipsum dolor sit amet. Ut in magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing. Lorem ipsum dolor sit amet.

Ut in magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing. Lorem ipsum dolor sit amet.

Ut in magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing. Lorem ipsum dolor sit amet. Ut in magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing. Lorem ipsum dolor sit amet.

Ut in magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing. Lorem ipsum dolor sit amet.

Ut in magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed adipiscing. Lorem ipsum dolor sit amet.

Ye olde document byline