Home/ Questions/Q 144191
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T08:12:52+00:00

Here is an outline of a page I’m developing. <?xml version=1.0 encoding=UTF-8?> <!DOCTYPE html

  • 0

Here is an outline of a page I’m developing.

<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html      PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'     'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>   <head>     <link rel='stylesheet' href='../css/test.css' />     <title>Prosperity Login</title>   </head>   <body>     <div id='banner'>     </div>     <div id='subbanner'>     </div>     <div id='body'>       <div id='colA'>       </div>       <div id='colB'>         <div id='B1'>         </div>         <div id='B2'>         </div>       </div>       <div id='colC'>       </div>       <div id='colD'>       </div>     </div>     <div id='footer'>     </div>   </body> </html>

And the CSS:

* {   margin: 0px;   padding: 0px; }    div {   border: 1px dotted; }  #banner {   height: 70px;   width: 100%; }  #subbanner {   height: 30px;   width: 100%; }  #body {   background-color: #CCFFCC;   width: 80%; }  #colA{   float: left;   height: 120px;   width: 24%; }  #colB{   float: left;   height: 80px;   width: 24%; } #colC{   float: left;   height: 120px;   width: 24%; } #colD{   float: left;   height: 120px;   width: 24%; }  #B1{   float: right;   height: 48px;   width: 80%; }  #B2{   float: right;   height: 28px;   width: 80%; } #footer{   height: 30px;   width: 100%; }

In Firefox 3, the body div (with a green background) is squished to almost nothing while IE7 renders the page perfectly. From what I can tell of the CSS 2.1 standard (via Meyer’s O’Reilly book), floated divs should float within their container block which is clearly not the case in Firefox 3.

So if Firefox’s rendering is compliant, what am I missing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Your problem is that IE7 clears the parent element so that it contains the floating child. This is not how it should be rendered. Better explanations by other posters.

    Simple fix: apply overflow: hidden; to your #body:

    #body {     overflow: hidden; }

    See this post for an explanation.

    • 0