344 users online (1 members and 343 guests)  

> > > > Problem with two floats and IE

  Results 1 to 4 of 4

Related

  1. floats in IE    Forum: CSS Forum
    Replies: 0
  1. 09-03-2005, 10:43 AM #1
    dobomode
    dobomode is offline
    dobomode's Avatar
    New User
    Status
    Offline
    Join Date
    Apr 2003
    Posts
    6

    Problem with two floats and IE

    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
    Reply With Quote Reply With Quote
  2. 09-03-2005, 05:47 PM #2
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    739

    Re: Problem with two floats and IE

    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
    Reply With Quote Reply With Quote
  3. 09-03-2005, 06:33 PM #3
    dobomode
    dobomode is offline
    dobomode's Avatar
    New User
    Status
    Offline
    Join Date
    Apr 2003
    Posts
    6

    Re: Problem with two floats and IE

    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
    Reply With Quote Reply With Quote
  4. 09-04-2005, 02:16 AM #4
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    739

    Re: Problem with two floats and IE

    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.


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread