Text Box with Floating Image

[LowRight]

Hello.I am trying to get text which is surrounded by a padded border to display properly with a floating image. Here is my css:.noteText{ color: #555; padding-left: 50px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; background-color: #f8f8f8; border-style: solid; border-color: #ccc; border-width: 1px;}.floatLeft{ float: left; margin-right: 15px; margin-bottom: 15px;}And here is the HTML:<div class="floatLeft"> <img src="images/page_specific/date_nav_panel.gif" alt="" /></div><p class="noteText">This is a message in a box.</p>The text appears 15 pixels to the right of the image and it's left border appears underneath the image. In other words, the box around the text extends to the left and under the image.What I want is the left side of the border around the text to appear 15 pixels to the right of the image.All other elements (textual paragraphs, ordered lists, etc.) I have placed to the right of the image behave as expected. Just text with a surrounding border does not seem to work like I *THINK* it should.

[ShadowMage]

Yes, I have this problem quite often too. I know what causes it, but I don't know how to fix it. I usually end up giving a width to the misbehaving element (in your case the <p class='noteText'>) and floating it in the opposite direction of the other element (in your case, right).

[dsonesuk]

if the images width remains fixed you could use margin-left: 110px; or whatever, to give you the desired effect

[LowRight]

Yes, I have this problem quite often too. I know what causes it, but I don't know how to fix it. I usually end up giving a width to the misbehaving element (in your case the <p class='noteText'>) and floating it in the opposite direction of the other element (in your case, right).

Thank you for your response. Unfortunately, I need this to work for the general case since this situation will occur on multiple pages with different images of varying widths.

[LowRight]

if the images width remains fixed you could use margin-left: 110px; or whatever, to give you the desired effect

Thank you for your reply. Unfortunately, there will be many images of varying widths.

[ShadowMage]

I just had a break through! Try adding overflow auto to the <p> tag which is misbehaving.