/    Sign up×
Community /Pin to ProfileBookmark

padding or margin problem

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[/url]

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;
}
[/code]

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>
[/code]

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.

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@dhimoetOct 06.2011 — Try this.. Change the centercolumn:
[code=php]#centercolumn{
float:left;
}[/code]


I have looked at your website using firebug. Remove your div id="content" and just merge it into id="centercolumn".
Copy linkTweet thisAlerts:
@Str8TalkingBobauthorOct 06.2011 — Thanks dhimoet the floating left isn't for me on the center column but you're right about the divs, i have no idea why i was using 2 where one would suffice. thanks a lot for the help. Problem solved.
×

Success!

Help @Str8TalkingBob spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...