Problem with two floats and IE

**dobomode** · 09-03-2005, 10:43 AM

Hello!

Consider the following HTML:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="width: 500px">
<div style="border: 1px solid #000; width: 100px; height: 100px; float: left; clear: both">LEFT</div>
<div style="border: 1px solid #000; width: 100px; height: 100px; float: right; clear: both;">RIGHT</div>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</body>
</html>

This renders more or less properly in Firefox and Opera with the second div floating below the first one. In IE however, both divs are floating next to each other. Is this a bug and if so, is there a way to fix it?

Thank you!

Dobo

**coothead** · 09-03-2005, 05:47 PM

Hi there dobomode,

This renders more or less properly in Firefox and Opera....

I have a slight leaning towards less

Have a look at this example, it may give you some ideas...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
     background-color:#eee;
 }
#container {
     width: 600px;
     padding:10px;
     border: 3px double #000;
     background-color:#fff;
     margin:40px auto;
     font-family:verdana,arial,helvetica,sans-serif;
     font-size:15px;
     color:#666;
     text-align:justify
 }
#left {
     border: 1px solid #000; 
     background-color:#eee;
     width: 100px; 
     line-height: 100px; 
     float: left; 
     margin:0px 10px 0px 0px;
     text-align:center;
 }
#right {
     border: 1px solid #000; 
     background-color:#eee;
     width: 100px; 
     line-height: 100px; 
     float:right; 
     margin:0px 0px 0px 10px;
     text-align:center;
}
-->
</style>

</head> 
<body> 

<div id="container">
<div id="left">LEFT</div> 
<div id="right">RIGHT</div> 
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. 
</div>
</body> 
</html>

coothead

**dobomode** · 09-03-2005, 06:33 PM

Thanks for replying.

Your example is actually what I am trying to avoid. I want the two floats to alternate on each side, but I don't want them on the same horizontal line.

I modified your HTML to show what I had in mind:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
     background-color:#eee;
 }
#container {
     width: 600px;
     padding:10px;
     border: 3px double #000;
     background-color:#fff;
     margin:40px auto;
     font-family:verdana,arial,helvetica,sans-serif;
     font-size:15px;
     color:#666;
     text-align:justify
 }
#left {
     border: 1px solid #000; 
     background-color:#eee;
     width: 100px; 
     line-height: 100px; 
     float: left; 
     margin:0px 10px 0px 0px;
     text-align:center;
	 clear: both;
	 margin: 10px;
 }
#right {
     border: 1px solid #000; 
     background-color:#eee;
     width: 100px; 
     line-height: 100px; 
     float:right; 
     margin:0px 0px 0px 10px;
     text-align:center;
	 clear: both;
	 margin: 10px;
}
-->
</style>

</head> 
<body> 

<div id="container">
<div id="left">LEFT</div> 
<div id="right">RIGHT</div> 
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. 
</div>
</body> 
</html>

I essentially added

Code:

clear: both

for the two floats. IE completely ignores that.

To put everything into context check this out:

http://www.depeche-mode.org/index.php/menu,2/sa,view/topic,135

This pages renders properly in Firefox and Opera with the two floating images on separate lines. In IE they show next to each other which makes the text too narrow.

Thanks,

Dobo

**coothead** · 09-04-2005, 02:16 AM

Hi there dobomode,

sorry about that, I misunderstood your requirements.

The only way that I know, to get IE to perform that way, is to place the float:right div within the body of the text, like this...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
     background-color:#eee;
 }
#container {
     width: 600px;
     padding:10px;
     border: 3px double #000;
     background-color:#fff;
     margin:40px auto;
     font-family:verdana,arial,helvetica,sans-serif;
     font-size:15px;
     color:#666;
     text-align:justify
 }
#left {
     border: 1px solid #000; 
     background-color:#eee;
     width: 100px; 
     line-height: 100px; 
     float: left; 
     margin:0px 10px 0px 0px;
     text-align:center;
 }
#right {
     border: 1px solid #000; 
     background-color:#eee;
     width: 100px; 
     line-height: 100px; 
     float:right; 
     margin:10px 0px 0px 10px;
     text-align:center;
    clear: both;
}
-->
</style>

</head> 
<body> 

<div id="container">
<div id="left">LEFT</div> 
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. 
<div id="right">RIGHT</div>
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. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. 
</div>

</body> 
</html>

Obviously where you place the div within the text will be a trial and error exercise but appears to be your only option.

Thread: Problem with two floats and IE

Thread Tools

Related

floats in IE Forum: CSS Forum

Problem with two floats and IE

Re: Problem with two floats and IE

Re: Problem with two floats and IE

Re: Problem with two floats and IE

Tags for this Thread

Cloudjiffy- PaaS for Developers