HTML and CSS Reference
The header is a header element, which is of type display:block . This means that by default
it takes up 100% of the width and creates a new line after it. Therefore we only need to set
the height .
The menu and content need to sit alongside each other; in order to achieve this, we set the
menu to float:left , and the content to float:right , and assign them each a percentage of the
You may now think that the footer element only needs to be given a height (as per the
header element). In fact, once we start floating elements, the page will keep floating block
elements until it is told to stop, therefore we need to add the clear:both property (both
refers to left and right, they can be cleared independently).
This simple example shows a lot of what you need to know in order to layout elements on
We could have achieved a similar result by setting menu and content to inline-block, but
the disadvantage would be that the content would wrap to the next line if it did not fit be-
The browser has a default stylesheet, and this specifies that the body should have
a margin of 8px around it. This causes an overflow for us. It is customary to re-
move the browser defaults when starting a project. This is customary done in a
file called reset.css - there are many examples on the Internet.
By now it should be relatively obvious how to position elements on screen when they are
positioned via their interactions with other elements. This is called static positioning.
It is possible to specify element positioning as relative:
By itself this does absolutely nothing, but it makes it possible to move an element with the
left , right , top and bottom properties, and move it from the position it would otherwise
hold in the flow.