I have a problem while coding a template. I want that all post have a thumbnail floated to left. But the background of "entry" div don't shows. Here is how I see it! here are the xhtml divs <div class="entry"> <div class="info"><p><a href="#">news</a> | <a href="#">10 comments</a> | 18 may</div> <div class="title"><h2>Title of the article</h2></div> <div class="thumb"><img src="images/thumb.png" alt="img"/></div> <div class="text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum lorem enim, in mollis ligula. Vivamus velit orci, varius nec gravida quis, pulvinar eget ligula. Ut risus mi, dapibus ut tempor at, cursus et nunc. Cras et condimentum ligula. Nulla facilisi. Nulla scelerisque mattis pulvinar. Donec turpis orci, feugiat et dictum in, pretium nec sapien. Fusce ultricies mattis blandit. Donec pellentesque, tortor vel vestibulum ultricies, sem est scelerisque tortor, nec ullamcorper nisl enim a lorem.</p> </div> Code (markup): And here is the CSS /* ----- ENTRY ----- */ .entry{ background: url('images/entry-bg.png') repeat-y; padding: 1px 25px; } .entry-top{ width: 600px; height: 20px; } .entry-bottom{ width: 600px; height: 20px; } .info{ text-transform: uppercase; } .title{ text-transform: capitalize; border-bottom: 1px solid #b1b1b1; } .thumb { display: inline; float: left; padding: 5px; border: 1px solid #b1b1b1; margin: 10px 10px 0 0; } .text{ font-size: 12px; } Code (markup): Thanks for your help!
Put something in before the end of the white container that clears it: HTML: <div class="clear"> CSS> .clear: clear: both; That oughta work... but there are probably smarter ways to do it.
Remember this : If you float an object inside a parent div it stops affecting the height of the parent div. To fix this you need to CLEAR THE FLOAT so you need to tell the browser that it needs to take everything above and include it in the height of the parent div. To do it the best way is to create in your stylesheet: .clear { clear: both } So now you can add a div with the class clear to CLEAR your height. You add a div at the end of you textcontainer : <div class="clear"></div> And you are done