Log in

View Full Version : unable to get center div to be same height as body container div


jasonc310771
04-26-2012, 06:00 PM
I have a problem with getting the center DIV the same height as the 'bodyContainer' DIV

I have tried adding height:100% to the HTML tag and the inherit to the child divs, but this causes the page to always be 100% or seem like it is actually 150% and the footer is way down the page.

Can anyone suggest a way to fix this display problem I am having?



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; }

.bodyContainer {
background-color: orange; margin: 0em auto; padding: 0em 0em 0em 0em;
width: 45em; height: 100%;
border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;
}

.menu {
background: green; margin: 0em; padding: 0.313em 0em 0.313em 0em;
border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;
text-align: center; font-size: 1.1em;
}

.leftSidePanel {
background-color: orange; padding: 0.313em 0.625em 0em 0.625em;
float: left;
width: 10em;
}

.mainContent {
background-color: lightblue; margin: 0em auto; padding: 0.625em 0.625em 0.625em 0.625em;
width: 20em; height: 100%;
border-left: 0.5em solid purple; border-top: 0.3em solid purple; border-right: 0.5em solid purple;
border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;
text-align: center; float: left;
}

.formWrapper{
margin: 0em auto; padding: 0em;
text-align: left;
border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;
}

.rightSidePanel {
background-color: orange; padding: 0.313em 0.713em 0em 0.313em;
float: right;
width: 10em;
}

.footer {
background-color: #ddd; margin: 0 auto; padding: 1em 0em 0em 0em;
text-align: center;
font-size: 0.875em;
}

.clearfloat {
clear: both;
}
--></style>

</head>
<body>
<!-- bodyContainer start -->
<div class="bodyContainer">

<!-- menu start -->
<div class="menu">
<div class="clearfloat"></div>
</div>
<div class="clearfloat"></div>
<!-- menu end -->

<div class="leftSidePanel">
<br><br>blah<br><br>blah<br><br>blah<br><br>blah
<br><br>take some of this out<br><br>blah
</div>

<!-- mainContent start -->
<div class="mainContent">
<div class="formWrapper">
<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah
</div>
</div>
<!-- mainContent end -->

<div class="rightSidePanel">
<br><br><br><br>blah<br>blah<br><br>blah<br><br>blah
</div>

<!-- Footer start -->
<br class="clearfloat">
<div class="footer">
some text
</div>


</div>
<!-- body container end -->

</body>
</html>
ajfmrf
04-26-2012, 09:03 PM
hmm not sure which div you want to make the same as bodycontainer?

There are quite a few div and I won't guess-lol
jasonc310771
04-26-2012, 10:15 PM
ok forgive the colours, its only to explain.

and also forgive my tables layout!

this is what i am after but using CSS.


<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="974" height="232">
<tr bgcolor="#6666CC">
<td height="23" colspan="3">
<div align="center">the header</div></td>
</tr>
<tr valign="top">
<td width="219" height="176" bgcolor="#00FF00">
<p>also has variable amounts of data</p>
<p>&nbsp;</p>
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah v</p></td>
<td width="519" bgcolor="#999999">
<p>this is the middle div that has variable amounts of info</p>
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p></td>
<td width="220" bgcolor="#FF6699">
<p>also has variable amounts of data</p>
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah</p>
</td>
</tr>
<tr bgcolor="#993366">
<td height="23" colspan="3">
<div align="center">the footer</div></td>
</tr>
</table>
</body>
</html>