Welcome to WebmasterWorld Guest from 22.214.171.124
Forum Moderators: not2easy
I am new here at the forums, so hi to everyone!
I have run into a problem with some CSS and div tags. This is what is happening:
I have a content div tag that contains another div tag called footer. The content div tag is 100% of the window height. Now, what I want to do is have the footer aligned at the bottom of the browser widow at all time (independent of how much content there is in the content area above).
Am I making sense here? I hope so, I have been banging my head against the wall with this for what seems like ages now.
Here are some things that I have tried:
- using vertical-align
- using absolute positioning (which I have had no luck with)
Please help! Thanks a million!
what I want to do is have the footer aligned at the bottom of the browser widow at all time (independent of how much content there is in the content area above).
The bottom is always moving with CSS making it difficult to get a footer on the page, even more difficult would be to have it span 100%.
Is it a three column layout? You could place the footer <div> below all of the content in (but still within) the middle <div>. Or if it's a two column layout, you could do the same except in the <div> where you want the content.
Lastly, recently there was a good thread on the subject of getting a footer down at the bottom of your page and keeping it there:
Read through that and you might find what you need.
Now in any logical browser, that should interpret correctly. I know I'm a logical browser, I don't know how IE and NS might handle it.
I know I'm a logical browser, I don't know how IE and NS might handle it.
Very logical WibbleWobble. But until we can use position: fixed; effectively, it's not going to work...Try it out. If content spills below the absolutely positioned footer it will scroll right along with the content, basically resigning from its role.
Of course, trying it with just static flow seems to work perfectly.
I think that it's possible hopefully without getting too technical:
body height: 100% no padding/margin
contentwrapper height: 95% no padding/margin
footerwrapper height: 5% no padding/margin
(no padding/margins/borders on containers will avoid IE's Box problem)
then put a spacer div height: 100% (of the 95%) and floated left, inside the contentwrapper (it can be made 1px wide so it's not noticeable) this will force the contentwrapper div to the required height if not very full.
then put your content and footer into divs or <p> tags with required padding/margins/borders inside their respective wrappers
Suzy (in theory mode!)
but this should:
/* colored borders put on for visual effect only */
font-size: 1px; /* to make sure width is not overridden */
background-color: red; /* visual effect only */
border-width: 1px 0 0 0;
<p>this is the content div</p>
<p>and even more</p>
</div><!-- content -->
</div><!-- contentwrap -->
The same thinking applies about no margins padding borders for IE's benefit..
but from this then you can style divs inside the content div as you like without affecting anything..
Sorry Suzy, that doesn't work for IE when it's in standards mode. Add a doctype like a full HTML 4.01 transitional or XHTML 1.0 transitional (without the xml prolog) that kicks IE6/7 into standards mode and the float with height 95% reverts to being 1 pixel tall and this technique fails.
I don't have a good replacement at the moment. Sucks this doesn't work though since you really need IE in standards mode for the correct cross-browser box model.