Menu
In a set of HTML pages that have some important text that requires a background-color. This can occur anywhere on the page.
I also have an image that must float right on every page. The text must wrap around this image.
Sometimes the text requiring a background-color needs to wrap around the floated image.
The problem is the background color of the text extends under the image. Like this:
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 have tried many different proposed solutions, but none I have found work for this particular problem. Is there a way to get the background-color to fit to the text (and not go under the image)? Can this be solved with CSS or JavaScript (with access to jQuery)? The solution needs to work in IE7+, FF4+, Safari3+, and latest Chrome.
353
Just add overflow: hidden; to the importantText class.
See this demo fiddle.
Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0, but since this is basic overflow functionality, I know for sure it works in all the other required browser versions.
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
