Problem with auto height for DIVs

[FarrisFahad]

Hi, I have a problem with the divs, when I set them to auto height they don't stretch with the content inside them, (another divs) 

Check out the code below ...

#LatestFunnyPicturesLOut{
	width:1080px;
	height:auto;
	background-color:rgba(255,0,0,0.30);
	margin:auto;
	padding:10px;
}

#LatestFunnyPicturesLIn{
	width:1060px;
	height:auto;
	background-color:#FFF;
	padding:10px;
}

#PicturesBox{
	width:800px;
	height:1500px;
	float:left;
}

HTML ...

<div id="LatestFunnyPicturesLOut">
	<div id="LatestFunnyPicturesLIn">
    	<div id="PicturesBox"></div>
    </div>
</div>

[Jessica]

If the div inside is floated, you'll need to add a clearing element right after them (within the container div)

A br with clear:both usually works

[FarrisFahad]

Hi Jessica, Thank you for your replay, It worked when I removed the floating property, I think that I got it but not quite well, can you give me an example code. That would be helpful, thank you.

I'll be waiting for your replay ...

 

FarrisFahad

[FarrisFahad]

After researching I have found that I just needed to add the overflow property to the container and set it's value to auto ...

I did it like this ...

#LatestFunnyPicturesLOut{
	width:1080px;
	height:auto;
	background-color:rgba(255,0,0,0.30);
	margin:auto;
	padding:10px;
	overflow:auto;
}

#LatestFunnyPicturesLIn{
	width:1060px;
	height:auto;
	background-color:#FFF;
	padding:10px;
	overflow:auto;
}

#PicturesBox{
	width:800px;
	height:1500px;
	float:left;
}

Hope that this helps anyone in trouble peace out