Misbehaving Divs

programming web dev
1

I’m having a problem getting some <div>s to line up horisontally. They all want to occupy the same space. Any idea what I can do to get them to line up correctly (Without giving them individual ids and postioning them using left and top).
Here is the HTML:

<!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">
@import url(global.css);
</style>
</head>
<div id="header">
    <div class="redtab"><div class="redtableft"></div><div class="redtabmiddle"><a href="#">Welcome</a></div><div class="redtabright"></div></div>
    <div class="redtab"><div class="redtableft"></div><div class="redtabmiddle"><a href="#">Welcome</a></div><div class="redtabright"></div></div>
    <div class="redtab"><div class="redtableft"></div><div class="redtabmiddle">Contact &amp; Mailing List</div><div class="redtabright"></div></div>


</div>
<div id="content">

</div>
<body>
</body>
</html>

And the CSS:

/*Global Properties*/
body {
    background-color: #313131;

}
h1 {
    
}
h2 {
    
}
h3 {
    
}
p {
    
}
a {
    
}
/* Main Navigation */
#header {
    height: 46px;
    color: #FFF;
    font: 14px Arial, Helvetica, Geneva, sans-serif;
    letter-spacing: 1px;
    display: inline-block;
}
#header a {
    text-decoration: none;
    color:#FFF;
}
#header a:link {text-decoration: none}
#header a:visited {text-decoration: none}
#header a:active {text-decoration: none}
#header a:hover {text-decoration: none; color: #dcdcdc;}


/*Red Header Tab*/
.redtab {
    position: absolute;
    height: 46px;
    margin: 2px;
    padding: 0px;
    background-color: #9D3131;
    display: block;

}
.redtabmiddle {
    padding: 4px;
}
.redtableft {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 6px;
    height: 46px;
    margin: 0px;
    padding: 0px;
    background-image: url(images/left.png);
    display: block;
}
.redtabright {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 6px;
    height: 46px;
    margin: 0px;
    padding: 0px;
    background-image: url(images/right.png);
}

This is driving me crazy, so i’d really appreciate someone else’s opinion.

:pir: