homepage Welcome to WebmasterWorld Guest from 174.129.103.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Align nested div to bottom
How to align a nested div at the bottom of parent div
nicky_boy




msg:1174048
 7:42 pm on Jan 7, 2003 (gmt 0)

Hi all,

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!

 

madcat




msg:1174049
 10:37 pm on Jan 7, 2003 (gmt 0)

Welcome to the forums nicky_boy!

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:
[webmasterworld.com...]

Read through that and you might find what you need.

WibbleWobble




msg:1174050
 11:51 pm on Jan 7, 2003 (gmt 0)

I think I must be really tired, because it seems straight-forward to me, and it obviously can't be. Anyway. Here's how I imagine it ought to be. Possibly.

#footer {
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
background-color: #whatever
}

<div class="contentstyles">content</div>
<div id="footer">footer</div>

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.

madcat




msg:1174051
 4:06 am on Jan 8, 2003 (gmt 0)

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.

WibbleWobble




msg:1174052
 10:01 am on Jan 8, 2003 (gmt 0)

Agg agg agg agg agg. That's popeye.

Unfortunately, I read your request as asking how to get something to display at the bottom of the webpage and not the browser window, which'd make it more frame-like, rather than a footer. Righty ho. My bad, ignore.

SuzyUK




msg:1174053
 10:20 am on Jan 8, 2003 (gmt 0)

..wibblewobble what are you on :)

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!)
:)

SuzyUK




msg:1174054
 11:23 am on Jan 8, 2003 (gmt 0)

Ok enough of the theory that didn't work!

but this should:

<style type="text/css">
/* colored borders put on for visual effect only */
body{
height: 100%;
margin: 0;
padding: 0;
}

#spacer{
height: 95%;
float: left;
width: 1px;
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;
background-color: red; /* visual effect only */
}

#contentwrap{
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}

#content{
padding: 30px;
border-width: 1px;
border-style: solid;
border-color: blue;
}

#footer{
clear: both;
height: 5%;
border-width: 1px 0 0 0;
border-style: solid;
border-color: red;
vertical-align: middle;
padding: 0;
margin: 0;
}

</style>
</head>

<body>
<div id="spacer"></div>

<div id="contentwrap">

<div id="content">
<p>this is the content div</p>
<p>&nbsp;</p>
<p>more content</p>
<p>&nbsp;</p>
<p>and even more</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div><!-- content -->

</div><!-- contentwrap -->

<div id="footer">footer</div>
</body>

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..

Suzy

theonliest




msg:1174055
 2:43 pm on Jan 8, 2003 (gmt 0)

nice code Suzy!
it even sort of works in nn4.7

nicky_boy




msg:1174056
 5:04 pm on Jan 8, 2003 (gmt 0)

That is amazing....thank you all for the feedback. That is great.

I second the nice job on the code there! Cool

illz




msg:3575220
 9:47 pm on Feb 14, 2008 (gmt 0)

Bleh.

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved