Float layouts
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.
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.
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.