probem with floats within a div

groomfedmek

New Member
Hi i'm trying to make a div within the front page of my site that contains a floating img and some floating text h3, p and a . I then want to loop the div below with different text/pic . When i do this once it works fine but the container div hasn't stretched to fit the content . So when I add another below it overlaps .code:\[code\]<div id="blog"> <h1>BLOG</h1> <div id="postcont"> <img src="http://stackoverflow.com/questions/7231982/blog1.png" width="40" height="40" /> <h3>Playing At The Phenoix</h3> <p>So we arrived down at the phenoix about 10 past ten .Rommy was all ready out of it and wasn't sure if he could do...<a href="http://stackoverflow.com/questions/7231982/bloglink.php">read more </a></p > </div> <div id="postcont"> <img src="http://stackoverflow.com/questions/7231982/blog1.png" width="40" height="40" /> <h3>Playing At The Phenoix</h3> <p>So we arrived down at the phenoix about 10 past ten .Rommy was all ready out of it and wasn't sure if he could do...<a href="http://stackoverflow.com/questions/7231982/bloglink.php">read more </a></p > </div> </div>#blog {float:left;width:400px;border-top:#0FF solid 6px;}#postcont {padding:10px;border-top:1px #FFF solid;margin-top:10px;}#blog h1 { font-size:20px; color:#FFF; padding:10px; padding-left:0px; letter-spacing:2px;}#blog p { font-size:15px; color:#FFF; float:right; clear:right; width:300px; margin-right:30px; letter-spacing:2px; margin-top:5px;}#blog a { font-size:15px; color:#FFF; float:right; clear:right; width:300px; margin-right:0px; letter-spacing:2px; margin-top:5px; font-style:italic; text-decoration:underline;}#blog h3 { font-size:15px; color:#FFF; float:right; clear:right; width:300px; margin-right:30px; letter-spacing:2px; margin-top:5px; font-weight:bold;}#blog img { float:left; clear:left;}\[/code\]
 
Top