Footer positioning for varying main content height 2

[frozenpeas]

Hi,

I seem to always have trouble wrapping my brain around this.

I have a footer that I want to appear below my main content. The main content is not always the same height. I have tried various approaches, but cannot seem to get it to work.

Here is the link:

http://soh.frozen-peas.com

where you can see the footer currently sits just below the header.

Here is the current code:

div#footer {
	position:relative;
	/*top:30px;*/
	left:218px;
	width:591px;
	height:60px;
	margin:0 0 0 0;
	padding:0 0 0 0;
	color:#999;
	text-align:center;
}

div#container {
	position:relative;
	top:10px;
	left:0;
	width:840px;
	margin:0 0 0 10px;
	padding:0 0 0 0;
	text-align:left;
}

If you need more, let me know. This is something that I have yet to logically understand, so indepth explanations are most welcome.

frozenpeas

 

[kpetursson]

You understanding of positioning was the same as mine. But I found this post...

http://www.tek-tips.com/viewthread.cfm?qid=1027744&page=3

You are not limited to positioning from the top left corner. You can reference the bottom, and the right.

So instead of
top:30px;
left:218px;

You could use
bottom:30px;
left:218px;

I think it sould work?!?

Hope this helps.

Kevin Petursson

 

[Vragabond]

Too much absolute positioning on your page. I think I explained the whole absolute vs. relative positioning to you once before but I apologize if that was another person. You seem to overrely on absolute positioning. Absolutely positioned elements disregard just about anything that is going on within the page. The only thing they take into consideration is their first positioned parent. Their initial coordinates are calculated from the top left corner of that element. But you can make them bigger than parent element, lie outside the parent element or anything like that. Parent element will not change accordingly. That means if your #footer is relatively positioned it will lie right under the last non-absolutely positioned element (as we have learned, absolute positioning is invisible to other elements). And that's where #footer is on your page. So, think about your page again. What is the normal flow of the page and what are the things that are just floating around, like post-it notes hovering over regular text? When you will answer that question for yourself, everything will be clear.

Another thing I would like to mention is using left vs. margin-left and their respective similars. We all know div element is a block element and by default expands 100% of the available width. Now, on my screen that is 1284px. Let us break from relative values for a moment and just think. When page is rendered, div will be 100% which is 1284px in this case. Now, let's apply value left: 200px; to the element. Element will retain its width of 1284px but will move extra 200px to the left. End result will be that this element will end at 1484px which is off my screen and the element will be either cropped or scrollbars will appear. However, margin-left: 200px will work in the other way. It will change my div's width to 1084px, totalling in 1284px and just filling up the page. As long as you specify width and height to an element, you can use left/right/top/bottom, but if you want it to expand enough to fill it's container, use margins.

If there are more questions or you need examples, let me know.

 

[frozenpeas]

Thanks, Vragabond. Yes, it was me that you had explained absolute vs. relative to before. I actually had this all done with relative, but the only browser it worked in was IE. Once I started working on x-compatibility, I ended up switching a lot of it to absolute. It's funny because I thought of you as I did it. I'm sorry for looking like one of those guys who just doesn't listen. I tried it with relative, and was happy that it was working... then in came the other browsers.

I have posted my original code, that uses mostly relative positioning. But the only browser it looks right in is Windows IE.

http://soh.frozen-peas.com/

/******************************************/
/*************** formatting ***************/
/******************************************/
body {
	background-image:url(../images/bg.gif);
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#000;
}
a {
	color:#999;
}
a:hover {
	text-decoration:underline;
}
h6 {
	display:none;
}
hr {
	background-color:#FFF;
	background-image:url(../images/hr.gif);
	height:15px;
	width:165px;
	border:0;
	text-align:center;
}
div.hr {
  height:15px;
  background:#FFF url(../images/hr.gif) no-repeat scroll center;
  margin:0 0 0 0;
  padding:0 0 0 0;
}
div.hr hr {
  display:none;
}
address {
	font-style:normal;
	text-align:center;
}
.center {
	text-align:center;
}
.quote {
	margin:0 100px 0 100px;
	padding:0 0 10px 0;
	font-style:italic;
}
div#container {
	position:relative;
	top:10px;
	left:0;
	width:840px;
	margin:0 0 0 10px;
	padding:0 0 0 0;
	text-align:left;
}
div#privacy {
	position:relative;
	top:0;
	left:0;
	width:95%;
	margin:10px 10px 10px 10px;
	padding:0 0 10px 0;
	color:#FFF;
	text-align:justify;
}
div.signature {
	margin:0 25px 0 0;
	padding:0 0 0 0;
	text-align:right;
}
/***********************************
*************** form ***************
***********************************/
label,input,select {
	display:block;
	margin-bottom:5px;
}
label {
	text-align:right;
	width:75px;
	padding-right:20px;
}
.form_field {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000;
	background-color:#FFF;
	font-size:10px;
}
.form_error{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#CC0000;
	text-align:center;
}
.form_btn {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFF;
	background-color:#3A84B4;
	font-size:10px;
	float:left;
	margin:5px 5px 0 0;
}
/***********************************
************** header **************
***********************************/
div#header {
	position:relative;
	top:0;
	left:0;
	width:810px;
	height:95px;
	background-color:#999;
	border:10px solid #FFF;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
div#header_tagline {
	position:relative;
	top:70px;
	left:0;
	width:330px;
	height:30px;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
div#header_logo {
	position:absolute;
	top:3px;
	left:590px;
	width:218px;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
/***********************************
*************** menu ***************
***********************************/
div#menu {
	position:relative;
	top:10px;
	left:-5px;
	width:225px;
	height:296px;
	margin:0 0 0 0;
	padding:0 0 0 0;
	float:left;
}
div#braveworld {
	position:relative;
	top:0;
	left:-5px;
	width:225px;
	height:90px;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align:center;
}
/***********************************
************** flash ***************
***********************************/
div#main {
	position:relative;
	top:10px;
	left:-8px;
	width:590px;
	min-height:332px;
	background-color:#FFF;
	border:10px solid #FFF;
	margin:0 0 0 0;
	padding:0 0 5px 0;
	text-align:justify;
}
* html body #main {
	height:332px;
}
div#main img.biopic{
	margin:0 10px 10px 0;
	border:1px solid #A7322D;
}
div#main a {
	color:#000;
	text-decoration:none;
}
/***********************************
*************** news ***************
***********************************/
div#news {
	position:relative;
	top:20px;
	left:-5px;
	width:300px;
	min-height:183px;
	border-top:2px solid #990000;
	background-color:#FFF;
	margin:0 0 0 0;
	padding:0 0 0 0;
	float:left;
}
* html body #news {
	height:183px;
}
div#news_copy {
	position:relative;
	top:7px;
	left:10px;
	width:282px;
	height:165px;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
div#news h1 {
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:18px;
}
div#news p {
	margin:5px 0 0 10px;
	padding:0 0 0 0;
}
/***********************************
************** issue ***************
***********************************/
div#issue {
	position:relative;
	top:20px;
	left:2px;
	width:300px;
	min-height:183px;
	border-top:2px solid #990000;
	background-color:#FFF;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
* html body #issue {
	height:183px;
}
div#issue_img {
	position:relative;
	top:7px;
	left:7px;
	width:107px;
	height:165px;
	border:1px solid #000;
	margin:0 0 0 0;
	padding:0 0 0 0;
	float:left;
}
div#issue_copy {
	position:relative;
	top:7px;
	left:10px;
	width:170px;
	height:165px;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
div#issue h1 {
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:18px;
}
div#issue p {
	margin:5px 0 0 10px;
	padding:0 0 0 0;
}
/***********************************
************** footer **************
***********************************/
div#footer {
	position:relative;
	top:40px;
	left:218px;
	width:591px;
	height:60px;
	margin:0 0 0 0;
	padding:0 0 0 0;
	color:#999;
	text-align:center;
}

But now my question becomes, "What do I need to do to make this cross compatible?"

Thank you for your help.

frozenpeas

 

[Vragabond]

How about this? It is only a little bit corrected version of your relative positioning. I had no trouble in IE6, Mozilla and Opera.

FrozenPeas

BTW, in case you're wondering, I am using relative positioning throughout the page, I am just not specifically specifying it.

 

[frozenpeas]

Thanks, Vragabond. I'm going over it with a fine-tooth comb to make sure I understand it.

I'm curious about the clearer class trick. What's the logic behind that?

Thank you again for your help. I really appreciate it.

frozenpeas

 

[frozenpeas]

Another question... one pages with more main content (ex:

http://soh.frozen-peas.com/distributor/),

the footer appears below the menu rather than below the main content.

Any idea as to why?

I thank you. You have helped me so much.

frozenpeas

 

[frozenpeas]

Sorry, disregard that. All is well.

Thanks again!

frozenpeas

 

[Vragabond]

What is clearing? Remember how we talked about the normal flow of the document and absolute positioning, that disregards the normal flow. Well, floats also disrupt the normal flow. Floated elements are taken out of the flow and as such do not expand the parent element. Parent element ends when last unfloated or absolutely positioned element ends. In our case, that would be right after the header. If we put a clearer div (which is just a dummy div), that element is again in normal flow and is put at the bottom of farthest and lowest (height-wise) floated element. That brings normally flowed elements back and expands the height of the parent to the end of the cleared div. And that is why we needed to put the cleared div in there. If you would like a demo of this, just put a border to your container and they play with removing and adding the clearer div.