Different output

amiw · Aug 17, 2005

Why does the code below produce two different pages.
IE seems to work fine and put a border around the div.container that houses the div.box's while Firefox just has a line across the top.

You can see what I mean

http://www.amiwired.com/layout/layout.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>test page</title>

<style type="text/css">
#container
{
width: 700px;
margin: 0 auto;
border: 2px solid #112b80;
}

div.box {
border: 2px solid #112b80;
height: 10em;
width: 40%;
margin: 10px 20px;
float: left;
padding: 1px 5px 5px 5px;
}
</style>

<head>
<body>

<div id="container">
<div class="box"><h1>Popular</h1></div>
<div class="box"><h1>Top</h1></div>
<div class="box"><h1>Bottom</h1></div>
<div class="box"><h1>Best</h1></div>
</div>

</body>
</html>

any ideas

Vragabond · Aug 17, 2005

Let's rephrase. They both put a border around the container, but IE mistakenly makes the container much larger than it actually is. Floated elements (all your boxes) are taken out of document flow and as such do not contribute to the height of their parent element. Since that is all your parent element has inside, it has no height at all. FF renders that. Easiest and quickest (if not entirely intuitive) way to fix it is to place a dummy element at the bottom of your boxes. One taht is not floated. That will tell the container that there is something more inside the container than just floated elements and will extend until that element. Since we will add clear to the element, that element will reside under all the floated elements and effectively give us the height of the container we were after:

Code:

<div id="container">
  <div class="box"><h1>Popular</h1></div>
  <div class="box"><h1>Top</h1></div>
  <div class="box"><h1>Bottom</h1></div>
  <div class="box"><h1>Best</h1></div>
  [b][blue]<div style="clear: both;"></div>[/blue][/b]
</div>

ChrisHunt · Aug 17, 2005

It's not entirely true to say that floated elements are taken out of the document flow, they clearly aren't since other elements flow around them rather than under/over them.

What is true is that an element that encloses floating content will not (or rather should not according to the spec) expand in size to surround that content, unless you tell it to. Vrag's method of adding a "clearing" div is one way of telling it. If you'd followed the code I gave you in thread215-1109086 more carefully, you'd have seen another (more elegant) method:

Code:

   #container {
      width: 600px;
      margin: 0 auto;
      [b]overflow: auto;[/b]
   }

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

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!

Different output

amiw

Programmer

Vragabond

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor