Float problem

Hey guys

I have an issue with the CSS float, inside my PHP file i have a HTML structure, like below, [full HTML code]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<div  style="width:950px; border: medium solid #990000;"  >
		   <div style="margin-left: 50px; margin-right: 50px;">
            <div  style="float:left;"   > 
			
				<div id="col_one__" style="float:left; min-height: 200px; background-color:#CCCCCC; width: 270px;"  >
                   HAHAHAHAHA 1
            	</div>
     
		  		 <div id="col_two__" style="float:right; min-height: 200px; background-color:#0000FF; width: 270px; margin-left:20px; ">
                   HAHAHAHAHA 2
                </div>
				
         	</div>
			
			 <div style="float:right;" >
            	<div id="col_three__" style="min-height: 200px; background-color:#00FF00; width: 270px;  margin-left:20px;" >
                HAHAHAHAHA 3
           		</div>
		  	 </div>			 
     	</div>
		</div>

</body>
</html>

I've inserted the CSS inside the HTML, so you can see it - This code works as I want it in FireFox, it doesnt in IE7.. [in IE7 the boxes dont lineup properly]

What am I doing wrong?

i know there's been a lot of issues, with CSS and IE7, is there like a list of things to do to avoid/tack particular issues such as floats, margins etc..?

Thanks in advance for your thoughts,

Not sure what the layout requirements are, but don't you just want to have a three-column design? Why are the first two div's grouped together? At first glance I would just remove the group and float all the three div's to left.

This is a bit cleaner:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">

#col_one__,
      #col_two__,
      #col_three__{
        min-height: 200px;
        _height: 200px; 
        width: 270px;
        padding: 0px;
        margin: 0px;
      }

#col_one__{
        float:left;
        background-color:#CCCCCC;
      }

#col_two__{
        float:left; 
        background-color:#0000FF; 
        margin-left:20px;
      }

#col_three__{
        float: right;
        background-color:#00FF00;
      }

#holder{
        width:850px;
        border: 3px solid #990000;
        padding: 0px 40px;
      }

.clear{ clear: both; }

</style>
  </head>
  <body>
    <div id="holder">
      <div id="col_three__" >
        HAHAHAHAHA 3
      </div> 
      <div id="col_one__" >
        HAHAHAHAHA 1
      </div>
      <div id="col_two__">
        HAHAHAHAHA 2
      </div>
      <br class="clear" />
    </div>
  </body>
</html>

Eric

Thanks for the replies guys.

The advice you've given me has solved most of my problems.

A little issue still stands, the code posted above fits into a bigger snippet of code, where I have to reset the margin by -36%, see HTML below, CSS is as per Eric's post

This works perfectly with FireFox. In IE7 the margin is incorrect, in the sense that it seems more like -40% - how could I rectfy this problem?

If I use the exact code above In FF and IE7 the page I get is slightly different. (in FireFox I see HA2, In in IE7 I see AHA2 - in the top left box )? Is this just me or something more to do with the browsers?

Thanks

Sorrry for the convaluted message.

Issue you are probably having is one browser has a scrollbar visible and the other does not.

% can be really strange with browsers, especially their behavior with odd widths.

Eric

Is there anyway I can state, if its IE7, do a different margin to other browsers etc.?

Use the HTML strict doctype. Then IE will behave according the W3 standard box model.
Also see: http://hsivonen.iki.fi/doctype/

Tried this doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The document looked totally wrong..!! In FF3 its still perfect..

This is frustrating!!! :