Div position in relation to varying parent div height 2

[frozenpeas]

Hello,

On this page, the footer currently remains in the same location, regardless of the page contents. The problem is when you select one of the items from the 2d menu, the footer needs to shift down... but it remains in the same place (since I have the top property set to 100%). As a result, content runs off the page and the footer floats above.

http://www.frozen-peas.com/fp/portfolio/

#main{
	position:absolute;
	width:386px;
	height:253px;
	left:0;
	top:265px;
	margin:0 0 0 0;
	padding:0 12px 12px 12px;
	background-image:url(../images/bg_right.gif);
	background-repeat:repeat-y;
}
#footer{
	position:absolute;
	background-image:url(../images/bg_footer.gif);
	background-repeat:repeat-x;
	width:410px;
	height:20px;
	left:1px;
	top:100%;
	margin:0 0 0 0;
	padding:15px 0 7px 0;
	background-color:#FFF;
	font-size:10px;
	color:#CCC;
	text-align:right;
}

<div id="main"><!-- contains dynamic content --></div>
<div id="footer"><!-- footer content --></</div>

What should I have the top property set as to allow the footer to move with the expanding content? I have tried using the bottom property as well, but with no success.

Thank you.

frozenpeas

 

[ChrisHirst]

Using position:absolute means that the elements are not part of the document flow, so are unaffected by changes in the preceding element(s).



Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[Vragabond]

As long as the footer will be absolutely positioned, it will ignore the content. If you want it to follow content you should position it relatively to content. Of course that won't make it at the bottom (or actually off the) page but rather right after the content. If you can live with that, that works. If not, you could toy with min-height (and just height for IE) to always make it a certain height, but you can't really work with 100% (ie filling the screen). FYI none of your pages have the footer float over content on my screen.

 

[frozenpeas]

Thank you for the replies.

The footer is now relatively positioned but if you visit the page, you will see the footer is hiding behind the main content, at the top. Strange.

I still have the top property set to 0. But it should follow after the "main" div, should it not?

Thanks again.

frozenpeas

 

[Vragabond]

Since the main is absolutely positioned, no. Try to avoid absolute positioning as much as you can since absolutely positioned elements don't interfere with normal document flow -- they just appear over and under each other depending on where they are placed.

 

[frozenpeas]

I am working from here now:

http://test.frozen-peas.com/portfolio/

and I am still having the same problem, despite touching up some of my CSS. When using absolute positioning, are things pretty unpredictable?

Here is my CSS code as it is now, still floating the footer behind the main content. Is there anything that stands out as incorrect? I tried eliminating absolute positioning completely, but things got really messed up (especially in Firefox).

/******************************************/
/*************** formatting ***************/
/******************************************/
body {
	background-image:url(../images/bg.gif);
	height:92%;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#000;
}
p {
	margin:10px 0 0 0;
	padding:0 0 0 0;
}
a {
	color:#000;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-decoration:underline;
}
a:hover {
	text-decoration:underline;
}
.center{
	margin:10px 0 0 0;
	padding:0 0 0 0;
	text-align:center;
}
.dropcap{
	float:left;
	font-family:"Times New Roman", Times, serif;
	width:23px;
	font-size:30px;
	line-height:20px;
	font-weight:bold;
	margin:0 0 0 0;
	padding:2px 5px 0 0;
}
.folioThumb{
	margin:0 0 0 0;
	padding:0 5px 0 0;
	text-align:left;
	vertical-align:middle;
	font-weight:bold;
	float:left;
}
.folioSample{
	margin:0 0 0 0;
	padding:15px 0 5px 65px;
	text-align:center;
	float:left;
}
.aboutPic{
	margin:2px 5px 2px 5px;
	padding:0 0 0 0;
}
/******************************************/
/************ form formatting *************/
/******************************************/
label,input,select {
	display: block;
	margin:0 0 5px 0;
	color:#333;
}
label {
	text-align: right;
	width: 75px;
	padding-right: 20px;
}
.folioSubMenu{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background-color:#FFF;
	font-size:10px;
	margin:0 0 10px 0;
}
.formField{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background-color:#FFF;
	font-size:10px;
}
.formBtns{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFF;
	background-color:#666698;
	font-size:10px;
	margin:5px 10px 0 0;
	padding:0 0 0 0;
	float:left;
}
/******************************************/
/***************** layout *****************/
/******************************************/
#container{
	position:static;
	top:0;
	left:0;	
	width:100%;
	height:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
/***************** left side *****************/
#left{
	position:static;
	width:203px;
	height:100%;
	top:0;
	left:0;
	margin:0 0 0 0;
	padding:0 0 0 0;
	background-image:url(../images/bg_left.gif);
	background-repeat:repeat-y;
	float:left;
}
#menu{
	position:static;
	width:203px;
	height:73px;
	top:0;
	left:0;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
#subMenu{
	position:absolute;
	width:175px;
	height:50px;
	top:75px;
	left:12px;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align:right;
}
#folioPieces{
	position:absolute;
	width:203px;
	height:73px;
	top:100px;
	left:12px;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
div.folioPiece{
	position:relative;
	display:block;
	width:175px;
	height:35px;
	border:1px solid #CCC;
	margin:0 0 20px 0;
	padding:0 0 0 0;
	font-size:9px;
	text-align:left;
}
div.folioCorner{
	position:absolute;
	width:15px;
	height:15px;
	border-left:1px solid #CCC;
	border-top:1px solid #CCC;
	border-right:1px solid white;
	border-bottom:1px solid white;
	bottom:-2px;
	right:-4px;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
#contactInfo{
	position:relative;
	display:block;
	width:165px;
	height:95px;
	border:1px solid #CCC;
	margin:0 0 20px 0;
	padding:0 0 0 4px;
	font-size:9px;
	text-align:left;
}
div.wallpaperPreview{
	position:relative;
	display:block;
	width:100px;
	height:75px;
	border:1px solid #CCC;
	margin:10px 0 20px 8px;
	padding:5px 5px 5px 5px;
	font-size:9px;
	text-align:center;
}
div.wallpaperDetails{
	position:absolute;
	display:block;
	top:12px;
	left:100px;
	width:160px;
	height:75px;
	margin:10px 0 20px 8px;
	padding:5px 5px 5px 5px;
	font-size:9px;
	text-align:right;
}
/***************** right side *****************/
#right{
	position:absolute;
	top:0;
	left:197px;
	width:412px;
	height:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
	background-image:url(../images/bg_right.gif);
	background-repeat:repeat-y;
}
#rdmImg{
	position:absolute;
	width:400px;
	height:265px;
	left:6px;
	top:0;
	margin:0 0 0 0;
	padding:0 0 0 0;
	background-image:url(../images/bg_pic.gif);
	background-repeat:repeat-x;
}
#main{
	position:relative;
	width:386px;
	height:253px;
	left:0;
	top:265px;
	margin:0 0 0 0;
	padding:0 12px 12px 12px;
	background-image:url(../images/bg_right.gif);
	background-repeat:repeat-y;
}
#footer{
	position:absolute;
	background-image:url(../images/bg_footer.gif);
	background-repeat:repeat-x;
	width:410px;
	height:20px;
	left:1px;
	top:0;
	margin:0 0 0 0;
	padding:15px 0 7px 0;
	background-color:#FFF;
	font-size:10px;
	color:#CCC;
	text-align:right;
}
#footer a {
	color:#CCC;
}

I'm fairly new to CSS layout, so I apologize if I'm staring the problem right in the face.

Thanks again.

frozenpeas

 

[Vragabond]

Ok, the best way I can help you is to teach you. It looks like you're struggling with what positioning actually means.

First, let's take a look at the document flow. This is something that is natural. It is what we're used to know. What comes first, gets rendered first. Subsequent elements will follow the end of the last one and so on. Picture you're writing a journal. You add a little text, then you add another date entry, some more text and finally you paste a photo. You will of course put the date entry after the end of the first text, start second text underneath the date and paste the photo at the bottom of the second text. This is how non-positioned, statically and relatively positioned elements work.

Second, what are positioned elements. When you give coordinates for absolutely positioned elements, they relate to something. One thing they will relate to is <body> or document window. That's why putting something 0 from bottom and 0 from right will put it in a right bottom corner of the browser. But you can also relate this positioning to other elements. Standards say absolutely positioned element will be positioned relative to their first positioned parent. That means as long as you embed an absolutely positioned element within another element that has position specified, all the values of absolutely positioned element will relate to that element. Bottom and right 0 will no longer be at the bottom right corner of the screen but at the bottom right corner of the parent element.

Third, document flow and absolute positioning. Absolute positioning (and floats) take elements out of document flow. That means it is not important when element was introduced, it can be put anywhere in the page. Another thing that comes with this is that they don't interfere with document flow. Let's get back to the journal. You just got a small photo relating to the first entry in the journal. In the mean time you entered another entry and you can't push that entry down to add the picture for the first. But you do have some empty space near the text of the first entry. So you paste the picture there. Because of this picture text, another date, another text or another picture won't shift positions. This picture does not interfere with the flow. In the same way absolute positioning does it. If you do not know the size of your absolute positioned element, other elements cannot tell when it ended, because it was placed on top of them, if you'd like.

If you understood all the above, it should be clear what is wrong with your code. #footer is positioned absolutely, 0 from the top so it will lie at the top of the browser or at the top of its parent element (that is right). If #footer will be relative, it will reflect the end of the last relatively positioned element in its path. Try understand the positioning and rewrite the page.

 

[frozenpeas]

Vragabond,

Thank you for your awesome reply. You've locked some understanding into my brain a little better now.

Now for the moment we've all been waiting for... I'm still having some problems.

I can't seem to get the footer properly placed after the "main" div. I have tried several different approaches but just can't get it working. Should I be declaring a top element? The closest I got had the footer at the bottom but it wasn't allowing for the expanding content within "main". So the changing height of the "main" div seems to be my gremlin at this point.

I'm sorry to beat a dead horse like this. I guess I'm not even beating the horse... I'm just poking it with a stick and going "I think I'm doing it right"

http://test.frozen-peas.com/portfolio/

#main{
	position:relative;
	width:386px;
	height:253px;
	left:0;
	top:265px;
	margin:0 0 0 0;
	padding:0 12px 12px 12px;
	background-image:url(../images/bg_right.gif);
	background-repeat:repeat-y;
}
#footer{
	position:relative;
	background-image:url(../images/bg_footer.gif);
	background-repeat:repeat-x;
	width:410px;
	height:30px;
	left:1px;
	margin:0 0 0 0;
	padding:15px 0 7px 0;
	background-color:#FFF;
	font-size:10px;
	color:#CCC;
	text-align:right;
}

The "footer" div is the sibling immediately following the "main" div.

If there is any other code you need to see, just let me know. Man, I'm sorry. I feel like such a noob.

Thanks very much again.

frozenpeas

 

[Vragabond]

Here's the problem: The top part, with the flash animation is positioned absolutely. That is not necessary and since we said we should avoid absolute positioning, we change it to relative. Strike one.

Now #main has fallen well below, due to top property. Don't use left, top, bottom, right properties with relative positioning, rather go for margin-... which produces better results (too tired to explain right now). But since we don't need to shift it at all, we can just get rid of it. Top goes. Strike two.

Your page should like it should at this point. A word of warning though. You have heights specified. Let's stop again at what height means. When you say, make this element 100px wide, would you complain if the element started to expand, just because you filled it up accross? Of course you would. Well, height is the same (for standard-compliant browsers). So, saying something is 253px, it will stay that high even if you put more stuff in it. Stuff will just hang over. IE will of course misinterpret and wil expand the element to fit it all in. W3 has however developed a standard for situations like these (that IE faithfully ignores): min-height. When you specify it, element will not contract beyond that point (if there is less content) but it will grow beyond that point if you have more content. Min-height will be recognized by all the 'cool' browsers today (Opera, Geckos, Safari) and ignored by IE. To fake the same thing in IE, specify height for it in a special IE-only selector. Like so:

#main {
	position: relative;
	width: 386px;
	min-height: 253px;
	margin: 0;
	padding: 0 12px 12px 12px;
	background-image: url(../images/bg_right.gif);
	background-repeat: repeat-y;
}

* html body #main {
        height: 253px;
}

 

[frozenpeas]

Vragabond, if I could give you another star I would.

Thank you so much for all your help. Explaining the workings of height and min-height has also helped. It sure doesn't help learning CSS when IE doesn't play by the rules.

Now I have to get the footer working in Firefox and I'm set.

Again, I thank you so much. You have given me a much better understanding of how it all works. Thank you.

frozenpeas