CSS Forum

**jmsailer** · 03-15-2009, 01:39 PM

hello, I am trying to float 3 left boxes and 3 right boxes, it works fine in IE but in FF the right boxes get shoved down. Here is my code. I am pretty new to floats so I must be doing something wrong obviously.
Thanks for your help!

<!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=utf-8" />

<title>Untitled Document</title>
<style>
}
.drg #container {
}
.drg #logoheader {
float: left;
width: 260px;
height: 137px;
background: #123456;
}
.drg #logoheader1 {
float: left;
width: 260px;
height: 137px;
background: #135790;
clear: left;
}
.drg #logoheader2 {
float: left;
width: 260px;
height: 137px;
background: #246890;
clear: left;
}
.drg #logoheader3 {
float: right;
display:inline;
width: 260px;
height: 137px;
background: #357890;
}
.drg #logoheader4 {
float: right;
width: 260px;
height: 137px;
background: #468910;
clear: right;
}
.drg #logoheader5 {
float: right;
width: 260px;
height: 137px;
background: #678910;
clear: right;
}
</style>
</head>
<body class="drg">
<div id="container">
<div id="logoheader">ee</div>
<div id="logoheader1">ee</div>
<div id="logoheader2">ee</div></div>
<div id="logoheader3">ee</div>
<div id="logoheader4">ee</div>
<div id="logoheader5">ee</div></div>
</div></div>
</body>
</html>

**chrishirst** · 03-15-2009, 04:59 PM

You seem to have a surfeit of closing </div> tags

**LadynRed** · 03-16-2009, 11:05 AM

Quote:

it works fine in IE but in FF the right boxes get shoved down.

A word to the wise - if it looks good in IE, chances are pretty darn good it's WRONG.
Make sure it works in FF (or Opera or some other standards compliant browser) FIRST, then kick IE into submission.

**djura** · 03-16-2009, 12:40 PM

<!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=utf-8" />

<title>Untitled Document</title>
<style type="text/css">
div.container {
height:600px;
overflow:visible;
}
div.left {
float:left;
width: 260px;
}
#logoheader {
width: 260px;
height: 137px;
background: #123456;
}
#logoheader1 {
width: 260px;
height: 137px;
background: #135790;
}
#logoheader2 {
width: 260px;
height: 137px;
background: #246890;
}
div.right {
float:right;
width: 260px;
}
#logoheader3 {
width: 260px;
height: 137px;
background: #357890;
}
#logoheader4 {
width: 260px;
height: 137px;
background: #468910;
}
#logoheader5 {
width: 260px;
height: 137px;
background: #678910;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div id="logoheader">ee</div>
<div id="logoheader1">ee</div>
<div id="logoheader2">ee</div>
</div>
<div class="right">
<div id="logoheader3">ee</div>
<div id="logoheader4">ee</div>
<div id="logoheader5">ee</div>
</div>
</div>
</body>
</html>

**yuechen** · 03-16-2009, 02:03 PM

We should all start a world-wide boycott of IE... though it'll never work...

**whooligan** · 03-16-2009, 03:31 PM

When I've had this problem, it was due to my divs being too wide with the padding/margins as different browsers have different default settings. Try decreasing the width, or remove the extra padding/margins.