Float

Using floats to set the structure of your web page

HTML tables vs CSS floats

Upgrade your code!

To upgrade from a main page table, to using floats instead, is painless

An example!

• Red's /buld website uses a main page table
• Red's /demo website uses floats

…tables are messy and floats are easy

Float left and right

First build your Home page..

• Place your logo, almost full width of screen
• Float your collaboration division (with a table) to the right hand side
• Float your menus division (with tables) to the left hand side
• Add your centre division (a single column table)

Clear fix

• Add your footer with a clear fix (to keep your footer at the bottom)

Template

• Finally, remove your centre to obtain your template!

Now use your template to create your other pages. Also watch what Asterix's /build website for additional training on how to do this

Notes

• The structure of your web pages must be replicated consistently across all your web pages. Starting from a template helps you to do this!
• For first term, everything on your web page had to be in a main page table, but now we have upgraded to using floats

Main Page | Basic web design | Navigation | Ranking | Support | Asterix Home