Colored boxes - Step 5. Choose a position method for the containers
Look at your design and decide how each of the containers will be positioned.
- Will the layout be liquid, fixed-width, em-driven or a combination?
- Will the layout be centered on the page?
- Which containers will need to be floated?
- Which containers will be in normal flow?
- Do you need to use absolute positioning?
This is probably the hardest step, as experience comes into play. For this example, the positioning methods will be:
- container - inline, centered on the page
- header - inline
- mainnav - inline
- menu - float: right
- contents - inline with margin-right to give the illusion of columns
- footer - inline, with clear: both to clear any floated items above
