Layout problem

I'm trying to do a layout where I have a gray background, a content area for text with a white background that is padded by 10px, and an image aligned in the upper-right corner of the white box (that doesn't get affected by the padding). I want the text in the content area to break at the image. Instead, I'm getting a content area that either covers the image totally (IE) or where the text just continues on its line across the image (Opera). How do I get the image that is outside the "content" area to affect text in the "content" area? Or, how do I put the image inside the "content" area, but align it to the "container" box?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

#container {
width: 750px;
margin: 0;
background-color: #FFFFFF;
min-height: 368px;
text-align: left;
}

#content {
width: 730px;
padding: 10px;
min-height: 348px;
}

.image {
float: right;
clear: none;
padding-left: 10px;
}

<div id="content">
<p>Content goes here. If you write enough, it'll overlap the image.</p>
</div>

</div>

Layout problem

Getting text to wrap

killerbean

drbrain

joshuakaufman

killerbean

drbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week