Tips for em based layouts
1. With em layouts overall size is based on the visitor's default fonts size which means they are less predictable but more visitor friendly. They are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. This layout is based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 90% on the body element or the #container, (do not go smaller or more of your visitors will need to resize to comfortably read the page) the entire layout will be proportionately smaller. You can adjust the size of the side columns by changing the number of ems used in sidecol1 and sidecol2. Make sure that you adjust the mainContent section accordingly. i
3. Be careful if you change the font size of any of the divs individually. Make sure you preview in as many browsers as possible if you do not use the same size in the side columns or the mainContent div.
Avoiding Extra Space Between Divs
If you have ever had space appearing above or below a div that you were unable to account for it you may be seeing margin collapse.
Turning on margin and padding visual aids can help you determine if margin collapse is responsible for extra space.
Zeroing the margin of the last element in the #masthead div will avoid margin collapse. If the div has a border around it, this is not necessary as that also avoids the margin collapse.
Adding a small amount of padding to the bottom of a div can also prevent margin collapse.