unable to get center div to be same height as body container div

Page 1 of 1

5 Replies - 530 Views - Last Post: 26 April 2012 - 01:28 PM

#1 jason-pc  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 60
  • Joined: 10-January 09

unable to get center div to be same height as body container div

Posted 26 April 2012 - 11:07 AM

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>


Is This A Good Question/Topic? 0
  • +

Replies To: unable to get center div to be same height as body container div

#2 Adidarw  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 06-April 12

Re: unable to get center div to be same height as body container div

Posted 26 April 2012 - 12:39 PM

Try this:

In your wrapper div, add:
overflow: hidden;
position: relative;


In your mainContent div, add:
height: 100%;


Sorry, I cant figure out how to edit my own post... by wrapper div, I mean bodyContainer.

I guess that's how I edit my own post...
Was This Post Helpful? 0
  • +
  • -

#3 jason-pc  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 60
  • Joined: 10-January 09

Re: unable to get center div to be same height as body container div

Posted 26 April 2012 - 01:07 PM

ok i made the changes but still it is not the same height.

here is the code now..
<!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; padding: 0em 0em 0em 0em;	
width: 45em;
border-top-left-radius: 1.125em;	border-top-right-radius: 1.125em;

overflow: hidden;
position: relative;
}

.menu {
background: green; 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; padding: 0.625em 0.625em 0.625em 0.625em;
width: 20em;
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; 

height: 100%;
}

.formWrapper{
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; 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>blah<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>

Was This Post Helpful? 0
  • +
  • -

#4 Adidarw  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 06-April 12

Re: unable to get center div to be same height as body container div

Posted 26 April 2012 - 01:16 PM

You're right. I was fooling around with it and turns out I had some extra text in there that pushed it down for me. Sorry about that.

Check out this page: http://www.ejeliot.com/blog/61
Was This Post Helpful? 0
  • +
  • -

#5 jason-pc  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 60
  • Joined: 10-January 09

Re: unable to get center div to be same height as body container div

Posted 26 April 2012 - 01:22 PM

ok i have changed the colours of the columns in case i may be confusing the issue.
<!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; padding: 0em 0em 0em 0em;	
width: 45em;
border-top-left-radius: 1.125em;	border-top-right-radius: 1.125em;
overflow: hidden;
position: relative;
}

.menu {
background: green; 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: blue; padding: 0.313em 0.625em 0em 0.625em;
float: left;
width: 10em;
}

.mainContent {
background-color: lightblue; padding: 0.625em 0.625em 0.625em 0.625em;
width: 20em;
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; 

height: 100%;
}

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

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

.footer {
background-color: #ddd; 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>blah<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>

Was This Post Helpful? 0
  • +
  • -

#6 Adidarw  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 06-April 12

Re: unable to get center div to be same height as body container div

Posted 26 April 2012 - 01:28 PM

Right, this link explains how to fix that. Unfortunately, there isn't a way to equalize those columns without "tricking" the browser to think they are equal columns (as the linked page explains).
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1