Clear Floats, Html Order - IE6-7

HTML & CSS
1

Hi all

I’m trying to understand clearing floats so I have the simple page where the containing div is cleared to stop it collapsing

Uncleared - http://www.ttmt.org.uk/overflow.html

cleared - http://www.ttmt.org.uk/overflow1.html



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>clearFloats</title>

	<style type="text/css">
	   *{
	      margin:0;
	      padding:0;
	   }
	   body{
	      background:gray;
	   }
	   div.box{
	      background:#fff;
	      width:1000px;
	      overflow:hidden;
	   }
	   *html div.box{
	      height:1%;
	   }
	   div.box img{
	      border:1px solid red;
	   }
	   div.box p.desc{
	      float:right;
	      width:500px;
	      border:1px solid red;
	   }
	</style>
</head>

<body>
   <div class="box group">
	<img src="images/pic1.jpg" alt="" />
	<p class="desc">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
      </p>         
   </div>   
</body>
</html>

If I test in IE 6/7 the text will not float to the right side of the image and is positioned underneath on the right side with the containing div stretching the height of the image and text.

I changed the order of the html so the <img> appears after the <p> and it works in IE 6/7 as it does in other browsers.

http://www.ttmt.org.uk/overflow2.html

Should elements to be floated appear before other elements in a container ?

Is IE 6 still relevant enough to fix problems like this ?

2

Hi, you have found out that IE doesn’t allow floats to sit by other non floated elements.

Some browsers let float sit side by side to inline elements (aka <img>) however not all do. So as you found out is is safe to have the float come first in the source order :slight_smile:

IE6 still has a good chunk of the market so do worry about that if you want :slight_smile:

3

Thanks RyanReese

Is it just floated elements next to non floated inline elements or

is it floated elements next to any non floated elements.

(I’m not at a machine where I can test in IE6/7)

4

If I understand correctly, while the specs say an inline next to a float should be able to sit alongside at the same level, some browsers (IE?) set newlines both before and after floats.

There’s also an IE clearing bug.

5

If a floated element comes after a block element it won’t float to the next line.

Which makes sense if you think about it-the floats would just go up to the top of the monitor if that were true. Inline content before a float is supposed to be on the same line, but IE doesn’t beleieve that. It thinks only floated content can sit next to floated content.

6

Yes as mentioned a float will sit on the same line as a preceding inline element if there is enough room and the inline element will be shifted left or right to make way for the float. Only modern browers understand this behaviour.

If a block element precedes a float then the float starts on the next new line and will not wrap the block content above.

More info here.