Messed up Div tag?

**TomTom100** · 06-06-2011, 01:54 AM

Hi,

I have this code on my page

<div id="titlediv">
<div id="title">
<h1> Welcome...</h1>
</div>
</div>

and this CSS to go with it

#titlediv { background-color:#000;
width:800px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:0px;
padding:0px;

}

#title { background-color:#000;
width:760px;
margin-left:auto;
margin-right:auto;
color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

but when I preview in a browser there is a white space between #titlediv and the div above it. Is there any way to remove this or fix it?

Using Adobe Dreamweaver CS5

Thanks
Thomas

**coothead** · 06-06-2011, 04:10 AM

Hi there TomTom100,

and a warm welcome to these forums.

Your code appears to be an excellent example of 'Divitis'

Check out the symptoms here...

Divitis:- what it is, and how to cure it

This will suffice...

Code:


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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>keep it simple</title>

<style type="text/css">
h1 {
    width:760px;
    padding:0 20px;
    margin:0 auto;
    font-family:'trebuchet ms',arial,helvetica,sans-serif;
    color:#fff;
    background-color:#000;
 }
</style>

</head>
<body>

<h1>Welcome...</h1>

</body>
</html>

coothead