Further CSS Layout Control

Using CSS to set HTML element widths

One problem with arranging our HTML in this way is that the <div> sections will size themselves automatically to fit the text contained within them. This means that for a standard menu bar, where we have lots of text that we want to contain in a narrow area, we will end up with a very wide bar which will either squeeze the content section into a small space, or ever push it onto another line. We can fix this by specifying widths for our sections:

#menu {
	float: left;
	width: 10em;
}

Widths can be specified in pixels, ems or as a percentage of the total page width.

The CSS clear property

We have seen how we can position HTML elements next to each other using CSS, but sometimes we might want an element to appear beneath other elements. We can easily force an element to sit below another using the clear property.

When using clear, we can tell an element to either clear those elements which are floated left, those which are floated right, or both:

#divname {
clear: left / right / both;
}

A great example of when we might want to do something like this is if we want to put a footer at the bottom of our page, beneath any side menus and content sections. To do this we would simply surround our footer HTML with a div tag named footer, and then apply the following CSS:

#footer {
	clear: both;
}

This would force the footer onto a new line underneath all previous elements.

Using the float and clear properties we can produce some highly creative and attractive layouts. But there are a few extra tricks we can use to give us even more control, which we will discuss on the next page.