FF wont clear, this is weird

styleBunny · Mar 17, 2005

Hi guys, i have this code, it renders fine in ie6 and even well in ie4 (cept for the double margin) but ff 1.01 wont clear properly, i have tried all types of clearing but have had no success. It looks like a nested div in ff but it isnt, ie renders it correctly as two divs next to each other.

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

.div1{
	background-color:#00FF55;
	float:left;
	margin:0px 10px 10px 20px;
	width:50px;
	display:inline;
	}

.div2{
	background-color:#CCC;
	margin:0px 10px 10px 20px;
	width:150px;
	
	}
	
</style>
</head>

<body>

<div class="div1">
	<img src="[URL unfurl="true"]http://www.google.com.au/images/logo_sm.gif"[/URL] width="50" height="50">
</div>

<div class="div2">
		Blairgowrie <br />
		Blairgowrie  <br />
		Blairgowrie <br />
		Blairgowrie<br />



</div>



 <h1>Blairgowrie</h1>	
	  
	  <p>
		  BlairgowrieBlairgowrieBlairgowrieBlairgowrieBlairgowrieBlairgowrie
	  </p>
			
	  
</body>
</html>

Thanks for looking and helping as always,
sb.

BillyRayPreachersSon · Mar 17, 2005

If you put a valid DOCTYPE at the very top of your code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

FF floats the text as you'd expect (albeit with the gray background still under the image).

Hope this helps,
Dan

The answers you get are only as good as the information you give!

Vragabond · Mar 17, 2005

I see nothing but expected behaviour from Mozilla (=FF) and not so expected from IE. Here's a good addition to Dan's suggestion of using a complete and valid doctype: In most cases it will be FF that renders the page correctly and IE that mocks it up. Let's review some aspects.

1. W3 claims the following:

W3 said:
With a value of 'left' or 'right', the element is treated as block-level (i.e. the 'display' property is ignored).

Meaning that your display: inline; is completely wasted and in addition, you have trouble understanding what you're doing.

2. Block that is floated will be on left or right of the text that is not floated, while the not-floated text will run on top beside and at the bottom of it, depending on where the floated element is. Since you put your floated element before the other text, floated box will begin at the top. Non-floated elements will wrap beside the floated box until all of it is gone (width, padding, border and margin) and then continue in full available width. This is exactly what FF does.

3. If you need to not have this kind of effect, you need to float both boxes. That will make them both each own entity and they will run down similar. That way you get more of a table effect than floating.

4. To see more referrence on how floats should behave, check:

http://www.w3.org/TR/CSS21/visuren.html#q27

styleBunny · Mar 17, 2005

Hi Guys,

Thanks for the response. I added the doctype (I did have a 'loose' doctype declaration but i didnt post it in the code, oops) the strict hasnt changed anything tho. The div2 still appears nested inside div1 when viewed in ff, where as ie renders it as i would have imagined.

The display:inline is to combat a double margin problem in ie, but its not apparent in this simplified example.

I guess the real issue i am trying to solve here is how to make sure the text wont wrap underneath the image but rather stay to the images right, in a seperate column.

p.

Vragabond · Mar 17, 2005

1. Use table.
2. Float both elements, not just one.

Once again, your display: inline; does no job because display gets ignored when element is floated.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

FF wont clear, this is weird

styleBunny

Technical User

BillyRayPreachersSon

Programmer

Vragabond

Programmer

styleBunny

Technical User

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor