css layout with html5

index7.html and css/style7.css

So far we've pretty much ignored the main attraction - the content area. Let's pretty that up with proper spacing, a bit of typography, and a floated image.

Take a look at the red boxes in the image below. Evening out differences in spacing like this will go a long way toward giving your design professionalism and polish.

We're pretty happy with the spacing above the headline. Let's give the left margin the same amount of space.

Here are the styles we've got so far that apply to section#main:

We don't want to add padding to the second rule there, because that will also add padding to the sidebar and footer, which we don't want. Let's change them to this:

Note that we removed the section#main selector from the second rule. We also commented out the placeholder background color for the content area since we don't need it anymore. And we added 25px of left and right padding to the section#main rule. But whey did we reduce the width from 740px to 710px? Because we increased the horizontal padding by 15px on each side of the box, which increased its total width by 30px. To prevent our design from falling part, we had to reduce the overall size of that box by the same amount.

How's the spacing now? Much better!