HTML and CSS Reference
In-Depth Information
</body>
</html>
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
overall width.
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
screen.
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-
side menu.
//
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:
postion: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.
