For a while now I’ve had a major issue with the background of this site and that of other sites I’ve been working on. The problem was that the white page background that is set in the container ( area containing the side bar and posts) would not correctly repeat in FireFox or Netscape without the addition of a height attribute set in the css.
This was not a formidable solution since the height on every page should be dynamic depending on how much content the page contains. So it was causing problems for me.
Today however I found the solution to my problems. If you are setting a up a page using the following method for example
<div id=”container”>
<div id=”col1″>….</div>
<div id=”col2″>…</div>
</div>
And in the css you have the following set up:
#container {background: url(images/page.gif) repeat-y; }
# col1 {float:left;}
#col2 {float:right;}
The floats are causing the problem! When you add floats to an item inside of a div it no longer considered inside of that div (container div that is). IE however forces it to be inside so it reads the height. Netscape and Firefox assume nothing is in the div container and ignores the background.
The solution is to add a clear after both columns, this will allow the div container to read through the bottom of the floating tags. Below is an example on how to set it up.
<div id=”container”>
<div id=”col1″>….</div>
<div id=”col2″>…</div>
<br class=”endOfSection”/>
</div>
The css would look like this:
#container {background: url(images/page.gif) repeat-y; }
# col1 {float:left;}
#col2 {float:right;}
.endOfSection {clear:both;}
Notice that the clear option resides in the br tag. You want this class to be applied into a tag that actual sets inside the div container, so span, br or even p tags would be an option, while another div tag may not work correctly.
I hope this will help others who are having this issue.