Geek Answers Handbook

The background color extends farther than the text and passes under the floating-point element

In a set of HTML pages containing some important text that requires a background color. This can happen anywhere on the page.

I also have an image that should float right on every page. The text should wrap around this image.

Sometimes text that requires a background color must wrap a floating image.

The problem is that the background color of the text extends below the image. Like this:

background / float problem

Here is the html and CSS:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Float Problem</title> <style type="text/css"> .main{ width:500px; } .floater { height:200px; width:200px; background-color:#C00; float:right; clear:left; margin:10px; padding:10px; overflow:hidden; } .importantText { background-color:#333; color:#FFF; padding:5px; font-weight:bold; } </style> </head> <body> <div class="main"> <div class="floater"> [An image here] </div> <p class="plainText">Integer luctus, nunc vel condimentum ornare, mi eros vehicula nisl, non adipiscing enim risus sit amet urna. </p> <p class="importantText">In hac habitasse platea dictumst. Fusce nec felis lorem. Fusce mollis ante elit, at tempor ipsum. Ut imperdiet libero sed sem rutrum rhoncus mattis erat aliquam. Aenean bibendum tincidunt erat sit amet varius. Vivamus sed arcu vitae magna aliquet porttitor quis sed augue. </p> <p class="plainText">Fusce molestie dignissim libero vehicula egestas. Suspendisse porta, felis et auctor suscipit, quam mi facilisis odio, id tempus lorem leo ac quam. Proin rhoncus dignissim eros, et commodo ante rhoncus sit amet.</p> </div> </body> </html>

I tried many different proposed solutions, but none of them found a job for this particular problem. Is there a way to make the background color match the text (rather than go under the image)? Can this be solved using CSS or JavaScript (with access to jQuery)? The solution should work in IE7 +, FF4 +, Safari3 + and the latest Chrome.

+4
source share
3 answers

Just add overflow: hidden; into the importantText class.

See this demo script .

Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0, but since this is a basic overflow function, I know for sure that it works in all other necessary versions of the browser.

+7
source

I don't think there is a way to do this when the display:inline element. You should have display:block on this <p> , or I suppose float will make the background not stretch 100% of the page width

0
source

Can't you just put the width in the important text class?

http://jsfiddle.net/S7XDX/

0
source

More articles:


All Articles