Thread: Problem with two floats and IE
Results 1 to 4 of 4
Related
-
floats in IE Forum: CSS Forum
Replies: 0
-
09-03-2005, 10:43 AM #1
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>
Thank you!
Dobo
-
09-03-2005, 05:47 PM #2bald 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....
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>
-
09-03-2005, 06:33 PM #3
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>
Code:clear: both
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
-
09-04-2005, 02:16 AM #4bald 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>
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum