Hi,
I have 3 divs in a container div. The first is floated left, the second is floated right and the last sits in the center. This creates 3 approximately even divs across a container div.
In each of these divs I am placing an image of varying heights. Then there is a separate div to sit below the container div which will be the full width (call it description div).
I want the container div to stretch to height of largest image div so that the description div sits nicely underneath the images. Currently this works when the left floated and middle divs contain the largest image but not for the right floated div. I cannot see why or what i'm missing any help would be much appreciated.
NOTE: I'm trying to do this without using any absolute values, just percentages. So I don't want to declare an absolute height to the container div! Also clear's will not work as this is simplified and there are actually a lot of other div containers around all of this etc, unless you can clear just the floats in the above nested div.
Here's the code:
<html>
<head>
<style>
#b_pics {
border: 2px solid grey;
width: 100%;
}
#b_pic1 {
border: 0px solid grey;
float:left;
width:33%;
}
#b_pic2 {
border: 0px solid grey;
margin: 0px auto;
width: 33%
}
#b_pic3 {
border: 0px solid grey;
float:right;
width:33%;
}
#b_website {
border: 1px solid grey;
width:100%;
}
</style>
</head>
<body>
<div id='b_pics'>
<div id='b_pic1'>
Image 1 here
</div>
<div id='b_pic3'>
Image 3 here
</div>
<div id='b_pic2'>
Image 2 here
</div>
</div>
<div id='b_website'>
Line of text goes here
</div>
</body>
Thanks in advance for any help, trying to keep any hair thats left in my head!