Forum Moderators: not2easy
There is however one small difference; the content section appears before the left and right columns in the source code. This is for SEO purposes to make the keywords appear closer to the top.
Unfortunately as soon as the content goes below the left and right columns, the footer follows the content section and overflows into the left and right columns.
I need the footer to stay below the 3 columns. Since the content will be managed via a CMS, I cannot use any fixed pixel heights. The footer needs to self adjust to always stay below the 3 columns.
I have attached the basic outline structure of the HTML and the key CSS styles. I need this to work on IE6 and 7 and Firefox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
---------------- HTML --------------------
<body>
<div id="outerWrapper">
<div id="header0" class="clearfix"></div>
<div id="header1"></div>
<div id="contentWrapper">
<div id="content" style="margin-right: 200px;"></div>
<div id="leftColumn"></div>
<div id="rightColumn"></div>
</div>
<div id="footer0"></div>
</div>
</body>
--------------- CSS ------------------
#content {
margin-left: 220px;
margin-right: 20px
}
#leftColumn {
position: absolute;
left: 20px;
top: 10px;
width: 180px;
}
#rightColumn {
width: 165px;
position: absolute;
right: 20px;
top: 10px;
}
#footer0 {
padding: 10px 20px;
}
If you would use floats it would be possible. But you'd need to change the order to something easier to deal with.
... as soon as the content goes below the left and right columns, the footer follows the content section and overflows into the left and right columns.
I need the footer to stay below the 3 columns.
Unfortunately I'm not sure I'm reproducing the trouble you are describing.
On the code provided increasing the height of div#content (by inserting more paragraphs of text) pushed div#footer downwards - as would be expected - but not as described.
Increasing the height of div#rightcolumn and/or div#leftcolumn meant div#footer continued to be displayed in line with the "bottom" of div#content - which meant the text in the side columns "overflowed" into the space occupied by div#footer - again, as expected, and sort of as described.
What is troubling me is your concern that the footer ... "overflows into the left and right columns" - because that sort of sounds like a width issue rather than a clearing/height issue.
However, if I've guessed right and this is a "clearing issue, and you have one div that will always be higher than the others, this is a workaround:
Assuming the div#content will be the longest div:
In your html:
Remove the style from div#content (becomes redundant)In your css
html, body {
height:100%;
}#contentWrapper {
position:relative; /* makes positioning of child elements easier */
top:0; /*set as desired - also saves top margins on child elements */
}#content {
position:relative;
top:0;
left: 220px;
width:500px; /* width required - dimension to suit */
}#leftColumn {
position: absolute;
top: 0;
left: 20px;
width: 180px;
}#rightColumn {
position: relative;
top: 0;
left:800px; /* rather than right - avoids large gaps in wide-screen displays */
width: 165px;
}#footer0 {
position:relative; /* sets position relative to div#contentwrapper */
top:0;
padding: 10px 20px;
}
div#footer will be drawn at the bottom of div#wrapper, and div#outerwrapper takes its total height from whichever child div is set to
display:relativeSo if div#contents isn't the highest div (as assumed here), just change div#contents display to
display:absolutedisplay:relative... and if I've guessed wrong, or you want to try other techniques that won't require changing your source ordering (which is good for accessibility as well as seo) - post back!
