Alignment and Floating
« Previous: Basic layout | Next: Fixed width layout »
Before going further, let's tidy up a little. The masthead and footer sections would look better if the text was centred inside them, and the text in the content area needs to flow around the images.
We can use text-align: center to horizontally align the masthead heading, and line-height: 130px (equal to the height of the masthead) to align it vertically:
#masthead h2 {
margin: 0;
text-align: center;
line-height: 130px;
}
We can also align the footer text to the centre, and reduce the font-size:
#footer {
padding: 0.5em;
text-align: center;
font-size: 0.8em;
}
And we can use floating to get the paragraph text to flow around each image:
#content img {
float: right;
margin: 15px;
}
Have a look at the modified page to see the alignment and floating in action.