IE float problem [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

jbbrwcky

01-26-2005, 09:30 AM

Hi!

I have made a suite of pages that look great in FF/Mozilla. Not so good in IE or Opera, but my main problem right now is the IE and here's why.

I have a main <div> container ("island"), and inside there is another <div> floated to the right ("ads"). In FF it works properly, floating to the right and the remaining contents of island wrap correctly to the left of ads. In IE however, ads is on the right but the remaining content of island is beneath ads and does not wrap.

ads has float:right; and clear:right; - am I missing something for IE?

Thank you,
Jbbrwcky

dexterz

01-26-2005, 10:18 AM

I have had same problem like this before. Make sure the they have enough space inside the div container. Set a width for the floating div. If the floating div does not have ebough room, it will be push down underneath. I fixed mine by setting the width.

www.ex-designz.net

Dexter

coothead

01-26-2005, 11:36 AM

Hi there jbbrwcky,

here is an example of a floated div, that has been tested in
I.E. 6, Opera 7.54 and Mozilla browsers. It does not require
clear:right in the 'ads' rule, but as dexterz has pointed out it
does require the floated div to have a set width.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float right</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
font-family:verdana;
background:#eee;
}
#island {
width:400px;
border:solid 1px #000;
background:#fff;
padding:10px;
font-size:16px;
text-align:justify;
margin:auto;
}
#island p {
background:#eef;
margin:0px;float:left:
}
#ads {
width:100px;
border:solid 1px #000;
background:#fee;
padding:5px;
font-size:13px;
text-align:justify;
margin-left:10px;
float:right;
}
/*//]]>*/
</style>

</head>
<body>

<div id="island">

<div id="ads">
ads ads ads ads ads ads ads ads ads ads ads ads ads ads
ads ads
</div>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent blandit venenatis purus. Integer massa libero,
vehicula id, consequat sed, tincidunt nec, purus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Suspendisse potenti. Nunc vulputate
magna non magna. Aenean lorem eros, adipiscing quis, semper
non, dictum a, nunc. Curabitur ut sem. Pellentesque a est id
neque hendrerit ultrices. Donec vulputate tincidunt turpis.
Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices
sit amet, convallis a, accumsan vel, ante. Proin aliquam turpis sed
augue. In pellentesque, magna a pulvinar adipiscing, est orci
adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis
aliquet urna.
</p>

</div>

</body>
</html>

jbbrwcky

01-26-2005, 01:53 PM

Ok, first, thanks for the replies!

I tried both version but to no avail then I went through it all again from head to toe. I found that I had given the island p a width, which the floated element was interfering with. So, my bad.

Thanks for the help though, appreciated!
Jbbrwcky