Forum Moderators: not2easy
Issue 1. The Orange coloured DIV should sit at the bottom ot its parent (purple div), Now this problem only happens in IE, when using firefox it sits in the correct position!
Issue 2. In IE, The page body DIV (in blue) isn't quite the right height, it should be at least the height of the child divs inside. It's Almost correct :P BUT in firefox the page body div is nowhere near the correct height.
Any help would be GREATLY appreciated.
Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
#PageBody {
width:1000px;
height:auto;
background-color:#005ed0;
border: black solid 2px;
margin:auto auto;
text-align:center;
}
#centerDiv {
width:895px;
height:auto;
/*border: red solid 2px; */
text-align: center;
margin: auto auto;
}
#BodyArea {
float: left;
border: purple solid 2px;
width:100%;
height:auto;
padding:0px;
margin:0px;
top:10px;
left:0px;
position:relative;
color:#FFFFFF;
}
#BigBody {
/*border: orange solid 2px;*/
margin:20px;
text-align:left;
}
#BodyAreaFooter {
border: orange solid 2px;
height:10px;
width:100%;
float:left;
}
</style>
</head>
<div id="PageBody">
Page Body
<div id="centerDiv">
Center Div
<div id="BodyArea">
Body Area
<div id="BigBody">
main body area <br />
main body area <br />
main body area <br />
main body area <br />
</div>
<div id="BodyAreaFooter">
</div>
</div><!--div id="BodyArea"-->
</div><!--div id="centerDiv"-->
</div><!--div id="PageBody"-->
</body>
</html>
Big issues. Just commenting out a lot of the garbage, however, seems to rectify both mentioned issues in FF, Opera, and IE. Added some background-color: to help see what was going on.
The main problem is that the CSS layout/design is unnecessarily complex and using declarations that are not only not needed, but are the direct cause of multiple issues and begging to be the source of future issues depending upon what is added to this page down the road.
This should give you a starting point to cleaning up the CSS and simplifying.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">#PageBody {
/*width:1000px;*/
/*height:auto;*/
background-color:#005ed0;
border: black solid 2px;
margin:auto auto;
text-align:center;
}#centerDiv {
width:895px;
/*height:auto;*/
/*border: red solid 2px; */
text-align: center;
margin: auto auto;
}#BodyArea {
background-color: purple;
/*float: left;*/
border: purple solid 2px;
/*width:100%;*/
/*height:auto;*/
padding:0px;
margin:0px;
/*top:10px;
left:0px;
position:relative;*/
color:#fff;
}#BigBody {
/*border: orange solid 2px;*/
margin:20px;
text-align:left;
}#BodyAreaFooter {
background-color: orange;
border: orange solid 2px;
/*height:10px;
width:100%;
float:left;*/
}
</style>
</head>
<div id="PageBody">
Page Body
<div id="centerDiv">
Center Div<div id="BodyArea">
Body Area
<div id="BigBody">
main body area <br />
main body area <br />
main body area <br />
main body area <br />
</div><div id="BodyAreaFooter">
Body Area Footer
</div>
</div><!--div id="BodyArea"-->
</div><!--div id="centerDiv"--></div><!--div id="PageBody"-->
<!--
Issue 1. The Orange coloured DIV should sit at the bottom ot its parent (purple div), Now this problem only happens in IE, when using firefox it sits in the correct position!Issue 2. In IE, The page body DIV (in blue) isn't quite the right height, it should be at least the height of the child divs inside. It's Almost correct :P BUT in firefox the page body div is nowhere near the correct height.
-->
</body>
</html>
Thank you so very much for your help! That has solved both of my issues
What I want to have in the main body area, are 2 divs, one which sits to the left edge, and one which sits to the right edge. But I can't seem to position them the way I want.
Any help is greatly appreciated.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#PageBody {
/*width:1000px;*/
/*height:auto;*/
background-color:#005ed0;
border: black solid 2px;
margin:auto auto;
text-align:center;
} #centerDiv {
width:895px;
/*height:auto;*/
/*border: red solid 2px; */
text-align: center;
margin: auto auto;
}
#BodyArea {
background-color: purple;
/*float: left;*/
border: purple solid 2px;
/*width:100%;*/
/*height:auto;*/
padding:0px;
margin:0px;
/*top:10px;
left:0px;
position:relative;*/
color:#fff;
}
#BigBody {
/*border: orange solid 2px;*/
margin:20px;
text-align:left;
}
#BodyAreaFooter {
background-color: orange;
border: orange solid 2px;
/*height:10px;
width:100%;
float:left;*/
}
#BodyTextLeft {
/*left:15px;*/
width:250px;
/*width:auto;*/
margin-left:20px;
height:365px;
line-height:30px;
text-align:left;
font-size:16px;
border: yellow solid 2px;
}
#BodyTextRight {
/*background-color:#00FFCC;*/
width:280px;
/*height:91%;*/
top:15px;
/*right:100px;*/
left:590px;
line-height:40px;
text-align:left;
font-size:16px;
border: orange solid 2px;
border-left:#FFFFFF dotted medium;
padding-left:15px;
}
</style>
</head>
<div id="PageBody">
Page Body
<div id="centerDiv">
Center Div
<div id="BodyArea">
Body Area
<div id="BigBody">
main body area
<div id="BodyTextLeft">
<br /><br />
<b>text to the left</b><br />
text to the left<br />
text to the left<br />
text to the left<br />
text to the left<br />
<br />
</div>
<div id="BodyTextRight">
<b>some body text that sites to the right</b><br /><br />
some body text that sites to the right<br />
some body text that sites to the right<br />
some body text that sites to the right<br />
some body text that sites to the right
<br />
</div>
</div>
<div id="BodyAreaFooter">
Body Area Footer
</div>
</div><!--div id="BodyArea"-->
</div><!--div id="centerDiv"-->
</div><!--div id="PageBody"-->
</body>
</html>
Just having another small issue now
For now add:
#BodyAreaFooter {
clear: both;
#BodyTextLeft {
float: left;
#BodyTextRight {
float: right;
This will address and 'fix' the left and right issues, and clear the footer, though you may need to use a clearing <div> in front of the footer; depending.
Cheers
