Associate
Hi i am designing a layout in css, the divs i float across to the right are not the same in ie and firefox. The spaceing between them is not right:
Any ideas?
PHP:
<!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>
<title>Untitled Document</title>
<meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />
<style type="text/css" >
#container {
width: 730px;
border: 1px solid #000000;
margin: 10px;
}
#container2 {
width: 930px;
margin: 10px;
margin-left:auto;
margin-right:auto;
}
#containerad {
float:right;
width: 165px;
border: 1px solid #000000;
margin: 10px;
}
#banner {
padding: 5px;
background-COLOR: #DD558C;
}
#content {
padding: 5px;
background-color: #F083AF;
}
#contentadban {
padding: 5px;
background-color: #DD558C;
}
#contentad {
padding: 5px;
background-color: #F083AF;
}
#footer {
clear: both;
padding: 5px;
background-color: rgb(252, 170, 191);
}
.bor {
border: 1px solid #000000;
}
body {
background-color: #241A1E;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="container2">
<div id="containerad" style="clear:both">
<div id="contentadban">Top</div>
<div id="contentad">
<p>test</p>
<p>test</p>
</div>
</div>
<div id="containerad" style="clear:both">
<div id="contentadban">Top</div>
<div id="contentad">
<p>test</p>
<p>test</p>
</div>
</div>
<div id="containerad" style="clear:both">
<div id="contentadban">Top</div>
<div id="contentad">
<p>Test</p>
<p>test</p>
</div>
</div>
<div id="container" >
<div id="banner">Top</div>
<div id="content"> test </div>
</div>
<div id="container">
<div id="banner">Top</div>
<div id="content">test
</div>
</div>
<div id="container">
<div id="banner">Top</div>
<div id="content">
<p>test </p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test </p>
</div>
</div>
</div>
</body>
</html>
Any ideas?