margin: 0 auto
This will then centre align the main content, but it'll also centre align the text! To offset the second, probably undesired, effect we inserted text-align: left into the content div.
8. Vertically aligning with CSS
Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn't really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won't make a difference and the text will be pushed to the top of the box.
Hmmm... not the desired effect. The solution? Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box - perfect!
9. CSS positioning within a container
One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. It's also possible (and often desirable) to position objects within a container. It's simple to do too. Simply assign the following CSS rule to the container:
Now any element within this container will be positioned relative to it. Say you had this HTML structure:
To position the navigation exactly 30px from the left and 5px from the top of the container box, you could use these CSS commands:
Perfect! In this particular example, you could of course also use margin: 5px 0 0 30px, but there are some cases where it's preferable to use positioning.
10. Background colour running to the screen bottom
One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn't suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:
Just one problem though: Because the navigation items don't continue all the way to the bottom of the screen, neither does the background colour. The blue background colour is being cut off half way down the page, ruining your great design. What can you do!?
Unfortunately one of the only solutions to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column. You would use this CSS command:
background: url(blue-image.gif) 0 0 repeat-y
This image that you place in the background should be exactly 150px wide and the same blue colour as the background of the left column. The disadvantage of using this method is that you can't express the left column in terms of em, as if the user resizes text and the column expands, it's background colour won't.
Using this method the left column will have to be expressed in px if you want it to have a different background colour to the rest of the page.
We really hope that you found these CSS tips helpful, and if you ever have any questions with regards to your website - please do not forget to Contact Us.