Just a little more...
Alana,
There is one problem with the template that has arisen. Because the left and right columns float from the middle column (which is fine), if either the right or left column happens to be longer than the center column and there is anything intended to be below that, as in this case, alignment is thrown out of whack and some items overlap.
The solution is fairly simple. First, put anything intended to be at the bottom of the page inside a <div>. Then put an entry into the css to clear that div from anything on either (both) sides. In this case there are two items for the bottom of the page (actually three, but one is even below the "container" div), a tracking code. The two are the footer and a google ad that is wider than the content column.
Our code should be as follows:
For the html,
</div><!-- end of content -->
<div id="bottomarea">
<!--#include virtual="includes/adbanner2.html" -->
<!--#include virtual="includes/footer.html" -->
</div>
</div><!-- end of container -->
For the css,
#bottomarea {
clear: both;
}
With this addition, the bottomarea div will drop below the lowest area on either side column.
|