test centered in a floated div

Hi there, I seem to have a problem with some text centered in a floated div. It just doesn't want to go in the middle of the box for whaterver reason.
Here's the code:
html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>This is a test page</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>

<body>

<div id = "wrapper">
<div id = "A">
<p>A</p>
</div>
<div id = "B">
<p>B</p>
</div>
<div id = "C">
<p>C</p>
</div>
<div id = "D">
<p>D</p>
</div>

</div><!-- END of wrapper-->

</body>
</html>

and CSS


#wrapper
{
border: 1px solid black;
width:100%;
height:900px;
margin: 0 auto;

}

#A
{
border: none;
background-color:pink;
width:50%;
height:450px;
float:left;
text-align:center;
}

#B
{
border: none;
background-color:green;
width:50%;
height:225px;
float:left;
text-align:center;
}

#C
{
border: none;
background-color:blue;
width:50%;
height:225px;
float:left;
text-align:center;


}

#D
{
clear:both;
border: none;
background-color:yellow;
width:100%;
height:450px;
text-align:center;


}

p
{
margin-top: 100px;
}

#A p
{
margin-top: 200px;
}

#D p
{

margin-top:200px;

}

The offending text is the "D". At the moment it is centered but on the top of the dive despite having


#D p
{

margin-top:200px;

}

This thing is driving me insane, why would that happen?
any help much appreciated
thanks

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>This is a test page</title>

<link rel="stylesheet" type="text/css" href="style.css">

<style type="text/css">
#wrapper {
   border:1px solid #000;
   height:900px;
   text-align:center;
  }
#a,#d {
   float:left;
   width:50%;
   height:250px;
   padding-top:200px;
   background-color:#ffc0cb;
  }
#b,#c {
   float:left;
   width:50%;
   height:125px;
   padding-top:100px;
   background-color:#008000;
  }
#c {
   background-color:#00f;
  }
#d {
   clear:both;
   width:100%;
   background-color:#ff0;
  }
p {
  margin:0;
  }
</style>

</head>
<body>

<div id="wrapper">

  <div id="a"><p>A</p></div>
  <div id="b"><p>B</p></div>
  <div id="c"><p>C</p></div>
  <div id="d"><p>D</p></div>

</div><!-- end of wrapper-->

</body>
</html>

test centered in a floated div

dupalo

rainborick

birdbrain

dupalo

birdbrain

dupalo

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week