three column DIVs will not show equal height

**jasonc310771** · 04-26-2012 03:16 PM

ok what i am after is three divs side by side all the same height, no matter what the divs content. be it that div one has 4 lines of text, div 2 have 8 lines of text and div 3 has 12 lines of text. all of them will be the same height and have different coloured backgrounds.

can anyone suggest how I do this correctly?

Code:

<!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&#37;;
}

.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>

**webjunke** · 04-28-2012 11:01 AM

Start by making sure your pading is the same all around fo each div and make sure you don't have extra breaks or that they all have the same amount of breaks. a break is <br>. I noticed you had quite a few.

**webjunke** · 04-28-2012 11:03 AM

Also give each div's class or id the same height is an easy way.

**codefish** · 04-28-2012 02:02 PM

I suppose you want to use different bg colors for the 3 of them. If so, after multiple tries to do the same, I just ended with a table. Box model has its limitation no matter how modern it is and how smart it makes you look. If you can't live with its limitations, use the old fashioned table

**webjunke** · 04-28-2012 02:24 PM

This should be what you are looking for. I set a minimum height so that they will still expand freely. Also you have a .3 padding in the center dic so you need to compensate for that in the left and right.

<!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"></style>

</head>
<body>

<div class="bodyContainer">


<div class="menu">
<div class="clearfloat"></div>
</div>
<div class="clearfloat"></div>


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


<div class="mainContent">
<div class="formWrapper">
blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah
</div>
</div>


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


<br class="clearfloat">
<div class="footer">
some text
</div>

</div>


</body>
</html>

Thread: three column DIVs will not show equal height

Thread Tools

Display

Hybrid View

three column DIVs will not show equal height

Thre Divs columns

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions