A really simple problem - but I can't solve it!

**JayUSA** · 03-10-2007, 11:01 PM

Hi Everybody,

Here is a REALLY simple problem! I am trying to float 3 colored boxes (blue, black and red) in one row so that they completely fill the width of an orange containing box (and therby fully obscure the orange box).

I have written some VERY simple HTML that you can find on the web. This website won't allow me to post the link as I am a new user (very, very annoying given all the forum notices encouraging users of this forum to post URLs). But, anyway, you can see this simple page by visiting the following pseudo-URL: "ulivewhere"+."com" +"/test"+".htm"

This simple page works fine in Firefox, but in IE6 and IE 7, the last colored box (red) drops down below the others.

Why, oh, why???

If you care to see the code, here it is:

Code:

<body>

        <!-- Row -->
    
        <div style="height: 10px; width: 300px; background: orange">
    
            <!-- Cell 2a-->
        
            <div style="float: left; height: 10px; width: 100px; background: blue ">
            </div>

            <!-- Cell 2b-->
        
            <div style="float: left; height: 10px; width: 100px; background : #191919">
            </div>
    
            <!-- Cell 2c-->
        
            <div style="float: left; height: 10px; width: 100px; background: red ">
            </div>

        <!-- End Row -->
        
        </div>

**coothead** · 03-11-2007, 01:01 PM

Hi there JayUSA,

and a warm welcome to these forums.

My guess, to start with, is that you are not using a DOCTYPE, which puts IE into Quirks Mode.

As for IE 6 you need to set the font-size to 0 as this browser assumes that the div will container the default font-size.
Here is your modified code...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    height: 10px; 
    width: 300px; 
    background-color:orange;
    font-size:0;
 }
#Cell2a {
    float:left; 
    height:10px; 
    width:100px; 
    background-color:blue;
 }
#Cell2b {
    float:left; 
    height:10px; 
    width:100px; 
    background-color:#191919;
 }
#Cell2c {
    float:left; 
    height:10px; 
    width:100px; 
    background-color:red;
 }
</style>

</head>
<body>

<div id="container">
    
<div id="Cell2a"></div>

<div id="Cell2b"></div>

<div id="Cell2c" ></div>

</div>

</body>
</html>

I would strongly advise you to get into the habit of always using a DOCTYPE, to help ensure cross browser compatibility.

Thread: A really simple problem - but I can't solve it!

Thread Tools

Related

Solve Traffic Problems. TE&Networking With A New Twist Forum: Internet Services

simple xml problem Forum: PHP Forum

Keep It Simple S****d Forum: HTML Forum

Simple Javascript Problem - I think... Forum: Javascript Forum

Theres a problem i cant solve Forum: CGI Perl Forum

A really simple problem - but I can't solve it!

Re: A really simple problem - but I can't solve it!

Tags for this Thread