PDA

Click to See Complete Forum and Search --> : need to make 3 DIVs of equal height

cilu
June 18th, 2008, 08:20 AM
I have the following HTML + CSS code:


<html>
<head>
<title>Sample 3 columns</title>
<style>
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 100%;
}

#header {
margin: 0 0 15px 0;
background: yellow;
}

#side-a {
float: left;
width: 20%;
}

#side-b {
float: right;
width: 35%;
}

#content {
float: left;
width: 45%
}

#footer {
clear: both;
background: #A2A2A2;
}

.Sandbox
{
border-left:1px solid #bbb;
border-right:1px solid #bbb;
border-bottom:1px solid #bbb;
border-top:1px solid #bbb;
margin-top:5px;
margin-left:5px;
margin-right:5px;
margin-bottom:10px;
padding-top:10px;
padding-left:15px;
padding-right:15px;
padding-bottom:10px
}

</style>
</head>

<body>

<div id="wrapper">

<div id="header">HEADER</div>

<div id="container">

<div id="side-a">
<div class="Sandbox">LEFT</div>
</div>

<div id="content">
<div class="Sandbox">
<div class="Sandbox">CONTENT</div>
<div class="Sandbox">MORE CONTENT</div>
</div>
</div>

<div id="side-b">
<div class="Sandbox">RIGHT</div>
</div>
</div>

<div id="footer">FOOTER</div>

</div>

</body>
</html>



What I want is make the left and right boxes equal in height with the middle one. So far I could not find how. Can anybody help? Thank you.
PeejAvery
June 18th, 2008, 09:48 AM
Are you looking for a pure CSS solution? If so, you are going to need to change your styling around a bit. I'm not understanding the whole Sandbox class. I don't know why you wouldn't just change the CSS of the parent container.

Either way, the simplest solution is to use JavaScript to check for the greatest height property, and then match it.

<script type="text/javascript">
function matchDivHeight(theArray) {
var tallest = 0, height;
for (i = 0; i < 2; i++) {
for (ii = 0; ii < theArray.length; ii++) {
if (i == 0) {
height = document.getElementById(theArray[ii]).offsetHeight;
if (height > tallest) {tallest = height;}
}
else {document.getElementById(theArray[ii]).style.height = tallest + 'px';}
}
}
}

// pass an array of div ids as the parameter
var elements = ['side-a', 'content', 'side-b'];
window.onload = function() {
matchDivHeight(elements);
}
</script>
cilu
June 18th, 2008, 09:52 AM
Well, I'm learning (remember HTML and CSS are not my primary expertise ;) ). So feel free to suggest any solution. A pure CSS solution would be nice.
HairyMonkeyMan
June 18th, 2008, 10:33 AM
I believe the height property works in most browsers if the div is positioned absolute.

#side-b {
position: absolute;
float: right;
width: 35%;
}
will put the right hand div at the top of the page.
PeejAvery
June 18th, 2008, 12:28 PM
The height property applies no matter why positioning you give the DOM element. Positioning something absolutely means that it will not conform to any placed objects, but however you position it with coordinates. We don't want this here.

Ed Eliot covers this topic well (http://www.ejeliot.com/blog/61) in his blog. However, you have a slightly different layout than most. I think that JavaScript is going to be your only escape. Still, take a look at Ed's implementations.

Here is a simple implementation using JavaScript. Also, I changed the Sandbox style for you.

<html>
<head>
<title>Sample 3 columns</title>
<style>
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border: 0px;
width: 100%;
}

#header {
margin: 0px 0px 15px 0px;
background: yellow;
}

#side-a {
float: left;
width: 20%;
}

#side-b {
float: right;
width: 35%;
}

#content {
float: left;
width: 45%
}

#footer {
clear: both;
background: #a2a2a2;
}

.Sandbox {
border: 1px solid #bbbbbb;
margin: 5px 5px 10px 5px;
padding: 10px 15px 10px 15px;
}
</style>
<script type="text/javascript">
function matchDivHeight(theArray) {
var tallest = 0, height;
for (i = 0; i < 2; i++) {
for (ii = 0; ii < theArray.length; ii++) {
if (i == 0) {
height = document.getElementById(theArray[ii]).offsetHeight;
if (height > tallest) {tallest = height;}
}
else {document.getElementById(theArray[ii]).style.height = tallest + 'px';}
}
}
}

// pass an array of div ids as the parameter
var elements = ['column1','column2','column3'];
window.onload = function() {
matchDivHeight(elements);
}
</script>
</head>
<body>

<div id="wrapper">
<div id="header">HEADER</div>

<div id="container">
<div id="side-a">
<div class="Sandbox" id="column1">LEFT</div>
</div>
<div id="content">
<div class="Sandbox" id="column2">
<div class="Sandbox">CONTENT</div>
<div class="Sandbox">MORE CONTENT</div>
</div>
</div>
<div id="side-b">
<div class="Sandbox" id="column3">RIGHT</div>
</div>
</div>

<div id="footer">FOOTER</div>
</div>

</body>
</html>
cilu
June 19th, 2008, 04:42 AM
Thanks for the information. I found that blog post myself, and is quite useful, though in my case the div blocks are not that easy to arrange like that. I guess in the end I'll leave them unequal, since my layout is getting more and more complicated and even unequal they are looking good. Anyway, that's for the help. I'll keep in mind the javascript trick for other cases.