MBarvian Posted June 17, 2010 Share Posted June 17, 2010 Hi guys, So here's the issue: I have a normal div with the following style: #information { width:900px; background: url(images/infobg.png) repeat-y; border-top:1px solid #000000; border-bottom: 1px solid #000000; color:#FFFFFF; font-family: "Verdana", "Arial"; font-size:12px; padding:20px; line-height:18px; } and the following html code: <div id="information"> <p><img src="style/images/logo.png" height="119" alt="Century 21 Pro-Team" align="left" />Why isn't this working?!?!</p> </div> the problem is, the background of the div isn't extending down past the image, where it should be, so it looks like this: any suggestions? thanks in advance :) Link to comment Share on other sites More sharing options...
0 bolerodan Posted June 17, 2010 Share Posted June 17, 2010 I believe its because you are floating the image (although using the inline align tag). You will need to clear the float, try adding <div style="clear:both;"></div> after your paragraph tag and see how that works. Im sure theres a more elegant way of solving that, I'm not sure if that will work with the align= tag or if it functions the same way as just floating the image left or right. Link to comment Share on other sites More sharing options...
0 DrDrrae Posted June 17, 2010 Share Posted June 17, 2010 See: Clearfix. Link to comment Share on other sites More sharing options...
0 Cupcakes Posted June 17, 2010 Share Posted June 17, 2010 Remove "align=left" (as that's what is causing the issue) and exchange for: <img src="image.jpg" class="logo" /> img.logo { float: left; } Don't forget to clear the floats. Link to comment Share on other sites More sharing options...
0 MBarvian Posted June 17, 2010 Author Share Posted June 17, 2010 great tricks guys, thanks for sharing :) Link to comment Share on other sites More sharing options...
Question
MBarvian
Hi guys,
So here's the issue: I have a normal div with the following style:
#information { width:900px; background: url(images/infobg.png) repeat-y; border-top:1px solid #000000; border-bottom: 1px solid #000000; color:#FFFFFF; font-family: "Verdana", "Arial"; font-size:12px; padding:20px; line-height:18px; }and the following html code:
<div id="information"> <p><img src="style/images/logo.png" height="119" alt="Century 21 Pro-Team" align="left" />Why isn't this working?!?!</p> </div>the problem is, the background of the div isn't extending down past the image, where it should be, so it looks like this:
any suggestions?
thanks in advance :)
Link to comment
Share on other sites
4 answers to this question
Recommended Posts