Footer Placement Problem

[cssrules]

I am using this code listing:

div#menuBar {


position: absolute;
left: 10px;
top: 140px;
padding-left: 0px;
float: left;
margin: 0px 0px 60px 0px;
width: 170px;
text-align: left;

color: #000000;
background-color: #ffffff;


}



div#main {

width: auto;
background-color: #cccccc;
color: #000000;
margin-top: 10px;
margin-left: 200px;
margin-right: 4%;


}

div#footer {
margin: 10px 0px 0px 0px;
color: #000000;
font-size: 8pt;
font-family: arial,helvetica,sans-serif;
font-weight: normal;
background-color: transparent;
padding-bottom: 5px;
text-align: center;
width: 100%;
height: 30px;

}


Inside my HTML first comes menuBar div, later main and last footer...So footer is placed according to main (fixed-relative to it since it is default unless otherwise mentioned)..

Here comes the problem (i guess common and simple but i haven't yet figured what is to blame): when the content of main div is short, footer "jumps" over the menuBar messing the design...

how can i instruct the layer footer to position itself according to menuBar's height + a value..If possible, i want to maintain the absolute positioning of the menubar unless it is impossible to do so...

Perhaps something to this effect:

document.getElementId("footer").offsetTop = <code here>

A bit of help will be greatly appreciated by a newbie like me...


a... where can i find a DOM reference that could point the methods, attributes etc .....??

Thank u in advance!

[Stefan]

Originally posted by cssrules

If possible, i want to maintain the absolute positioning of the menubar unless it is impossible to do so...

It's impossible with CSS. You could do it with JavaScript but that only works if JS in turned on in the browser.

I would use CSS floats instead

<div style="float:left;width:170px;">menu</div>
<div style="margin-left:200px;">main</div>

<div style="clear:both;">footer</div>

[cssrules]

thanx for the tip...

now the footer is placed underneath the longest div (both menuBar and main are fixed-relative)...


There is another problem though...I need to keep the menubar explicitely sized (i.e. 170px) and place the main div next to it by just declaring margin (no widths)..Kinda like this code:


div#menuBar {

position: relative;
float: left;
margin: 10px 0px 0px 10px;
width: 170px;
text-align: left;
color: #000000;
background-color: #ffffff;


}


div#main {
width: auto;
margin-right: 5%;
margin-left: 200px;
text-align: left;
}

Everything's ok under Mozilla.. IE 6 though seems to create a nasty gap next to the div i have as a title...

Here is the url: http://www16.brinkster.com/comsite9/test/altIndex.htm

What can be done...I need to keep the menuBar explicit (170px) and the main to strecth ( liquid) without declaring width....

This trick works fine if i declare position: absolute for the menubar but, as i have mentioned in the previous thread, i need relative-fixed for the menuBar to keep the footer ok....




How can i have both (menubar 170px and main without explicit width) without sacrificing one or the other???

heeeeeeeelp........

[Wisbin]

Hi,

Try this for deleting IE's nasty whitespace:

 div.topicHeader {
	background: #009999;
	color: #ffffff;
	font-size: 11pt;
	font-family: arial,helvetica,sans-serif;
	font-weight: bold;
	height: auto;
	line-height : 50px;
	margin: 0px 0px 0px 0px;
	padding-right: 3px;
	text-align: right;
}

[cssrules]

Words can explain how helpful your tip has been...

I was trying endless hours to find a solution, i even tried to place main to float at the left....Yet nothing...Up till now...


T H A N X!!

Forums = MAGIC!

[Stefan]

Originally posted by cssrules
Everything's ok under Mozilla.. IE 6 though seems to create a nasty gap next to the div i have as a title...

Yepp, there is a know bug in IE that makes it for some reason add a 3px margin on things next to a float.
One of the many issues that makes IE blow as a browser.

This page is a good description of the issue.
http://users.rraz.net/mc_on_the_rock...reepxtest.html

[cssrules]

well i have decided to use an image inside the topicHeader div and align it to the left...

Same bug again...i' ve tried applying the line-height and height: auto attributes....In vain....Not working...

same annoying whitespace...

How can it be corrected......?

Thank u in advance!