PDA

View Full Version : Div positioning problems, please help?

MrDoubtFire
05-17-2003, 05:21 PM
Hi all, I will try to be succinct in my explanation, as much as I can.

I code in XHTML1.1 Strict, and have had no major problems doing so for several months now. I start to design a page which appears simple enough, but I have problems with two divs:

<body.....

<div id="div1">
<div id="internal1"></div>
<div id="internal2"></div>
</div>

<div id="div2">
<span id="1"></span>
<span id....
</div>

</body....

Here is the associated CSS:

#div1 {
position: absolute;
width: 600px;
left: 50%;
margin-left: -300px;
margin-bottom: 10px;
top: 125px;
}

#div2 {
position: absolute
left: 50%;
margin-left: -300px;
width: 600px;
margin-top: 100px;
height: 45px;
bottom: 0px;
clear: both;
}



The problem arises here -> in "div1" I have two floating divs, one for content, one for a secondary content. Both display properly, but I do not specify their height, and more likely than not, one will be longer than the other.

"div2" is supposed to be my footer, and I followed previous examples of how to ensure a footer will be at the bottom of the viewport, or the bottom of the page.

The footer however, appears at the bottom of the viewport -OVER- #div1. How can I ensure the footer will always be at the bottom of the page/viewport?

Hope someone can help, thanks!

MrDoubtFire
liorean
05-17-2003, 05:27 PM
Just speculating, but couldn't a topmargin on the footer do that for you? (Won't work with absolutely positioned layers.)
COBOLdinosaur
05-17-2003, 08:04 PM
document.getElementById('div2').style.setExpression("top","document.getElementById('div1').top+document.getElementById('div1').offsetHeight");
liorean
05-17-2003, 08:17 PM
Cd: Which only works in iew...
pardicity3
05-17-2003, 11:57 PM
Wby are you using absolute positioning in the first place? It seems to me that you could accomplish the same thing on your div's (centering that is) by using margin-left: auto and margin-right: auto. Also you could move div 1 down from the top by using margin-top: 125px.

If you avoid absolute positioning then I don't think you will hae a problem getting the footer div at the bottom of the page.
Mr J
05-18-2003, 09:31 AM
Not too sure about this but here's my attempt.

Div2 remains at the bottom of the page irrespective of how much text is in Div1

The script must be at the bottom of the page unless you use onload or maybe a timeout


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<style>
#div1 {
position: absolute;
width: 600px;
left: 50%;
margin-left: -300px;
margin-bottom: 10px;
top: 125px;
border:1 solid blue;

}

#div2 {
position: absolute;
left: 50%;
margin-left: -300px;
width: 600px;
margin-top: 100px;
height: 45px;
bottom: 0px;
clear: both;
border:1 solid red
}
</style>

</HEAD>
<BODY>

<div id="div1">
<div id="internal1"></div>
<div id="internal2">Testing Text<BR>Testing Text<BR>Testing Text<BR>Testing Text<BR>Testing Text<BR>Testing Text<BR>Testing Text<BR>Testing Text<BR>Testing Text<BR>Testing Text<BR>Testing Text<BR>Testing Text<BR></div>
</div>

<div id="div2">
<span id="1"></span>
<span id="2"></span>
</div>
<script>
<!--
value1=document.getElementById("div1").offsetHeight
value2=document.getElementById("div2").offsetTop
value3=document.getElementById("div1").offsetTop
value4=document.getElementById("div1").style.pixelTop

if(value1>value2-value3){
document.getElementById("div2").style.pixelTop=value4+value1+30
}

// -->
</script>
</BODY>
</HTML>
MrDoubtFire
05-19-2003, 01:58 PM
Thanks to those who replied, much kudos to all! I will use all the advice in the next revision of the site.

MrDF