My problem now is that there seems to be a gap in between the elements within the columns.
In the left column, there is a good 20px gap from the logo area to the announcement area, and the same with the right column concerning the navigation and picture area:
Opps, here it is in context:
It also causes the elements to start further down than I would like them to.
Also, what if I have different layouts on each page of a site ; would it still be better to create different css classes for each page? Or create a class like .content and .column and just float the column on the left or right depending on what layout I want?
I want 4 different layouts: Left content columns such as a "news" and "specials" box, right column with same idea, top boxes same idea, bottom boxes same idea: layouts.gif