Hi all, i’m having a problem with a site i’m trying to build. I have 3 divs (left, right and center column) with the left floating left, right floating right and the center column pushing up between the 2, for some reason my center column is padded at the top a lot more than the left and the right. i have given all 3 divs a 5px padding-top but the center column doesnt seem to want to obey. i have uploaded the site [url=”http://doobeez.com/bloggin”]here
it’s probably something really simple but i’ve trawled through my code and it’s just not jumping out at me. Hopefully some fresh sets of eyes can find the problem.
This is my CSS
[code]
@charset “utf-8″;
/* CSS Document */
* {
margin:0;
padding:0;
}
body{
background: #262525;
font-family:”Trebuchet MS”, Helvetica, sans-serif;
min-width:800px;
}
ul {
text-decoration:none;
list-style:none;
}
#wholewrap{
}
#sitewrap{
text-align:left;
}
#topwrap{
width:100%;
background-image:url(../images/top_bg.png);
}
#topleft{
height:25px;
width:135px;
float:left;
}
#topleft p{
margin-left:5px;
}
#topright{
height:25px;
width:135px;
float:right;
text-align:right;
}
#topright p{
margin-right:5px;
}
#topcenter{
height:25px;
margin-left:135px;
margin-right:135px;
text-align:center;
}
#header{
height:100px;
min-width:958px;
text-align:left;
background-image:url(../images/headerbg.png);
}
#header_left{
float:left;
}
#header_right{
float:right;
margin-top:2px;
}
#navbar{
height:25px;
width:100%;
background-image:url(../images/footer_links_bg.png);
}
#contentwrap{
width:98%;
}
#leftcolumn{
width:166px;
float:left;
left:0;
color:#FFF;
margin-top:5px;
}
#leftcolumn p {
margin-left:10px;
font-weight:bold;
}
#leftcolumn h3{
color:#fff;
background-image:url(../images/left_h1_bg.png);
font-family:”Trebuchet MS”, Helvetica, sans-serif;
font-weight:bold;
text-align:left;
text-indent:10px;
border-bottom:1px solid #000;
}
#rightcolumn{
width:162px;
float:right;
right:0;
background:#000;
color:#FFF;
border:2px solid #8B0000;
margin-top:5px;
}
#rightcolumn p {
margin-left:5px;
}
#right_ads{
}
#centercolumn{
margin-left:175px;
margin-right:177px;
margin-top:5px;
}
#footer{
height:50px;
background-image:url(../images/footer_bg.png);
bottom:0;
clear:both;
text-align:center;
width:100%;
}
#footer_links_bar{
height:25px;
background-image:url(../images/footer_links_bg.png);
bottom:0;
clear:both;
text-align:center;
width:100%;
}
p.copyright{
padding-top:10px;
color:#FFF;
}
/*******************Start Navmenu*****************/
#navmenuwrap{
}
#navmenu {
}
#navmenu ul{
width:300px;
margin:auto;
line-height:20px;
}
#navmenu li{
list-style:none;
float:left;
background-image:url(../images/button_bg_hover.png);
}
#navmenu ul li a{
text-align:center;
font-family:”Trebuchet MS”, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
height:25px;
width:100px;
display:block;
color:#FFF;
text-shadow:1px 1px 1px #000;
}
#navmenu ul li a:hover {
background-image:url(../images/button_bg.png);
}
/*******************Left Menu*****************/
#leftmenu{
}
#leftmenu ul li a {
font-family:”Trebuchet MS”, Helvetica, sans-serif;
font-weight:bold;
list-style:none;
text-decoration:none;
color:#fff;
width:156px;
display:block;
text-align:left;
background-image:url(../images/left_bg.png);
line-height:normal;
padding-left:5px;
padding-right:5px;
border-bottom:1px solid #000;
border-top:1px solid #000;
}
#leftmenu ul li a:hover {
font-weight:bold;
list-style:none;
text-decoration:none;
color:#FFF;
width:156px;
display:block;
background-image:url(../images/left_bg_hover.png);
padding-left:5px;
padding-right:5px;
}
/****************** End left menu************************/
#content{
background:#fff;
padding: 5px;
text-align:left;
}
#content img{
margin:5px;
border:2px solid #8B0000;
}
#content h1{
color:#8B0000;
background:#2a6da9;
text-align:center;
}
#content h2{
color:#fff;
background:#000;
text-align:center;
}
/*start footer links*/
#footer_links_wrap{
margin-top:10px;
}
#footer_links{
}
#footer_links ul{
width:500px;
margin:auto;
line-height:20px;
}
#footer_links li{
list-style:none;
float:left;
background-image:url(../images/button_bg_hover.png);
}
#footer_links ul li a{
text-align:center;
font-family:”Trebuchet MS”, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
height:25px;
width:100px;
display:block;
color:#FFF;
text-shadow:1px 1px 1px #000;
}
#footer_links ul li a:hover {
background-image:url(../images/button_bg.png);
}
a img {
border:none;
}
and this is the html/php
[code]
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html charset=utf-8″ />
<title>Blog Test | Home</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
</head>
<body>
<div id=”wholerap”>
<div id=”topwrap”>
<div id=”topleft”>
<?php include(“includes/top_left.html”); ?>
</div><!– end topleft –>
<div id=”topright”>
<?php include(“includes/top_right.html”); ?>
</div><!– end topright –>
<div id=”topcenter”>
<?php include(“includes/top_center_text.html”); ?>
</div>
</div><!– end topwrap –>
<div id=”header”>
<div id=”header_left”>
<?php
include(“includes/logo.html”);
?>
</div><!– end header_left –>
<div id=”header_right”>
<?php
include(“includes/header_ads.html”);
?>
</div><!– end header_right –>
</div><!– end header –>
<div id=”navbar”>
<?php include(“includes/navmenu.html”); ?>
</div><!– end navbar –>
<div id=”sitewrap”>
<div align=”center”>
<div id=”contentwrap”>
<div id=”leftcolumn”>
<?php include(“includes/leftmenu.html”); ?>
</div><!– end leftcolumn –>
<div id=”rightcolumn”>
<?php include(“includes/right_ads.html”); ?>
</div><!– end rightcolumn –>
<div id=”centercolumn”>
<?php include(“includes/homepage.html”); ?>
</div><!– end centercolumn –>
</div> <!– end contentwrap –>
</div><!– end centering div –>
</div><!– end sitewrap –>
<div id=”footer_links_bar”>
<?php include(“includes/footer_links.html”); ?>
</div><!– end footer links bar–>
<div id=”footer”>
<?php include(“includes/footer.html”); ?>
</div><!– end footer –>
</div><!– end wholerap –>
</body>
</html>
Thanks in advance to anybody who can help with this as its such a little thing that is making me want to pull out what little hair i have left.