I am facing a challenge with a div[div1] that contains other elements. The elements inside have an absolute positioned image, and both div1 and the elements have a float left property without showing any height. Is there a solution to give div1 a height so that other elements like footers can be floated below it?
Here is the HTML code:
<div class="div1">
<div> <img src="image1.jpg" /> </div>
<div> <img src="image2.jpg" /> </div>
<div> <img src="image3.jpg" /> </div>
</div>
And here is the CSS code:
.div1{
width:100%;
height:auto;
overflow:auto;
float:left;
}
.div1 div{
width:100%;
height:auto;
overflow:auto;
float:left;
}
.div1 div img{
width:100%;
height:auto;
position:absolute;
display:block;
float:left;
}