Absolute Bottom

HTML & CSS
1

My footer is inside my “everything” div (sample). “Everything” has relative position. Footer has absolute position and “bottom:0”.

Why isn’t it snapping to the bottom of “Everything”?

2

Considering the “everything” div has no height how do you expect it to be placed below everything?

BTW, when positon:absolute and float:left are together , float:left; will be basically ignored. So everything inside is position:absolute, thus the parent has no height.

Why is everything position:absolute anyway? Or floated for that matter?

3

I don’t think the “everything” div is floated. The “nav” div is floated, because the li’s inside are also floated. I wanted a horizontal navigation bar. By floating it, I force the “nav” div’s height to extend. I think.

I also think I’ve done this before, here, without giving the relatively positioned parent an explicit height.

I say “think” because it’s entirely possible I’m doing something different now.

4

Floating collapses the parents height unless a clearing mechanism is given. Aka a cleared element, overflow:auto|hidden, clearfix.

The page you linked to just now only works because #cnt isn’t floated/position:absolute and thus the parent has a height. If you have some sort of non AP’d content this can be done without javascript :).

I said that a height wil be needed to make this work

5

It’s not how i would lay it out but here it goes:


#everything {
	position:relative;
	width:900px;
	margin:0 auto;
	background-color:#0FF;

}

#cnt {

padding:296px 30px 72px 30px;
	width:100%;
	min-height:642px;
}

Is this what you want? Only tested locally in Opera so you you might have to tweak it for IE. The background color on #everything is just for testing purposes.

6

Ah, I see, I see, I see.

Thank you.