Text not wrapping in IE around floated images - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Text not wrapping in IE around floated images

Text not wrapping in IE around floated image

penmaster

8:31 pm on Apr 4, 2008 (gmt 0)

10+ Year Member

I am trying to wrap text around floated images. It looks right in Safari, Firefox and Opera (Mac and PC) but wrong in MSIE (7) on the PC. The text appears below the images in MSIE instead of wrapping around the floated images. I did notice that if I don't use the width attribute in the columntext style, that it does wrap, but then I lose the white space on the right.

Please can anybody tell me what I am doing wrong?

<style type="text/css">

</style>
</head>
<body>
<div id="container">
<img src="images/fig-1.gif" width="180" height="150" class="floatright" />
<img src="images/fig-2.gif" width="145" height="125" class="floatright" />
<img src="images/fig-3.gif" width="145" height="125" class="floatright" />
<div class="columntext">
<p>Lorem ipsum [about 125 - 150 words]. </p>
<p>Lorem ipsum [about 125 - 150 words]. </p>
<p>Lorem ipsum [about 125 - 150 words]. </p>
<p>Lorem ipsum [about 125 - 150 words]. </p>
<p>Lorem ipsum [about 125 - 150 words]. </p>
<p>Lorem ipsum [about 125 - 150 words]. </p>
</div>
</div>
</body>

Dave75

9:00 pm on Apr 4, 2008 (gmt 0)

10+ Year Member

.columntext + img width is wider than #container.

penmaster

9:26 pm on Apr 4, 2008 (gmt 0)

10+ Year Member

Sorry, Dave, I don't understand the solution ... please look at it in Safari, Firefox or Opera to see the desired layout.

Dave75

12:21 am on Apr 5, 2008 (gmt 0)

10+ Year Member

What's happening is that IE is not getting the float property correct and adding the img width to the .columntext div. This is larger than the #container div width. If you declare the following, you will see what I mean.

#container{width:800px;}

Or, you could declare this:

.columntext{width:400px;}

Either way is good, depending upon your layout constraints.

penmaster

12:27 am on Apr 5, 2008 (gmt 0)

10+ Year Member

Thank you for your help, Dave. Is there any way to achieve the layout like it appears in in Safari, Firefox or Opera? Do you know how I would have to setup the styles in order to achieve this layout?