Float layouts

NOTE that float layouts are deprecated. This article is left in place for future readers, but you should prefer Flexbox or Grid layouts in your modern designs.

If the position of an element does need to affect the position of other elements on the page then you might want to consider a float layout. Let’s say for example, you have some text columns of uncertain height and you want to put a footer underneath them.

Exercise - Simple Columns

Create an html file and linked stylesheet.
Add a div to the page. Give it a class of wrapper.
Place four divs on the page. Give them classes of header, sidebar, main and footer.
The header div is full width so needs no special styling. Give it a height.
Float the sidebar left (float:left) give it a width, add some content to make it realistic.
Float he main div right (float:right) give it a width, add some content again to make it realistic.
The footer needs to clear:both to make it drop down beneath the columns, no matter which one is tallest. Add some text to it if you like to make it realistic.

%img{ src: “/images/webdev/float.jpg” }

This layout with a header, sidebar, main content and footer is probably the most common one you will encounter. It’s used all over the place. Though possibly a little dull, it’s extremely effective and easy to use. Visitors like it because they know immediately how to use it.

Exercise - Responsive Grid

Create an html file and linked stylesheet.
Create a wrapper div and constrain it’s width in CSS.
Create a number of divs nested inside the wrapper div.
Constrain the widths and heights of each of the divs. Make little squares.
Float each of the little square divs left.
Play with the widths, heights and margins of each of the divs to make a nice clean grid.

%img{ src: “/images/webdev/float2.jpg” }

This layout is tremendously useful. It can be an image gallery, a grid of links, a navigation page with links to sections, or numerous other things. Team it up with a big lifestyle image and you have a nice homepage.