CSS Problem with the theme I am customizing.. Please help :(

Hello guys,

I'm just wondering if anybody can help me a bit on my wordpress site. I want the sidebar shown on the sidebar of course, but unfortunately, it lines up with my posts.

Any help would be much appreciated. I'm a total noob at designing.

Thanks in advance.

here's my css:

*/

body, h1, h2, h3, h4, h5, h6, blockquote, p, div{
margin: 0;
padding: 0;
}

body{
margin: 0;
font-family: 'Trebuchet MS', Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #000000;
background-image:url(images/back.gif);

background-repeat:repeat-x;

color:#000000;

}

h1{
font-family: 'Trebuchet MS', Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}




input{
border:1px solid #533419;
background-color:#E4EAFF;
color:#000000;
font-family: 'Trebuchet MS', Georgia, Sans-serif;
font-size:12px;
margin:1px;
font-weight:bold;

}
input[type="text"],input[type="radiobutton"],textarea,select{
border:1px solid #533419;
background-color:#E4EAFF;
color:#000000;
font-family: 'Trebuchet MS', Georgia, Sans-serif;

margin:1px;
font-weight:bold;

}

textarea{
border:1px solid #533419;
background-color:#E4EAFF;
color:#000000;
font-family: 'Trebuchet MS', Georgia, Sans-serif;


font-weight:bold;

}

#wrapper{
position: relative;

margin: 0 auto 0 auto;
width: 950px;
text-align: left;
clear:both;

background-attachment: fixed;
display:inline;
}

#header{

width: 950px;
height:250px;
margin: 0 auto 0 auto;
font-size:20px;
color:#000000;
text-align:left;

background-image:url(images/backg2.gif);
background-position: center top;
background-repeat:no-repeat;
display:block;
}

#header a{
color:#000000;
text-decoration: none;

}

#header h1{
font-size:50px;
color:#ffffff;
padding:50px 0 0 30px;

}

#htitle {
position:absolute;
top:190;

}
#hdesc {
width: 950px;
clear:both;

float:left;
padding:0 0 0 30px;



}

#bwrap{
width: 934px;


background:#ffffff;
display:block;
border-left:8px solid #333333;
border-right:8px solid #333333;
padding:0 0 10px 0;
clear:both;

margin: 0 auto 0 auto;
}

#container{
float: left;
clear:left;
width: 480px;
display:block;
margin: 0 0 0 0;
border-right:1px solid #cccccc;
padding: 0 10px 0 10px;
color:#000000;

}

.post{
padding: 5px 0 0 0;
background: url(images/backtop.gif);

}

.post h2{
font-family: 'Trebuchet MS', Georgia, Sans-serif;
font-size: 18px;

vertical-align: text-top;

height:23px;

}

.post h2 a{
color:#3B57BB;

}

.pdate {width: 45px;height: 33px;float:left;}
.pmonth {font-size: 12px; font-weight:bold; text-transform: uppercase;color: #ffffff;text-align: center;display:block;line-height: 11px;padding-top: 3px;margin-left: -3px;}
.pday {font-size: 12px; font-weight:bold; text-transform: uppercase;color: #ffffff;text-align: center;display:block;line-height: 11px;padding-top: 2px;margin-left: -2px;}


.date{
display:inline;

}

.ptitle{
display:inline;

}

body a{
text-decoration: none;
color:#3B57BB;
}


body a:hover{
text-decoration: underline;
}


.entry{
line-height: 18px;

padding: 0 5px 5px 5px;
border-bottom:7px solid #E6E6E6;
}

.navigation-b{

float: right;
left:50px;
}

.searchf{
display:inline;
background:transparent url(images/topbut.gif);
height:28px;
float:left;
vertical-align:middle;
padding:2px 0 0 0;
}

.searchf input{
display:inline;
height:18px;
margin:0 5px 0 5px ;

}

.searchf input[type="submit"]{


}
#searchform{
display:inline;
}
#searchsubmit{
height:22px;
}

p{
padding: 10px 0 0 0;
}

p.postmetadata{

margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 11px;
color:#333333;
}

p.pmeta2{


}

.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;

}

.adspots img{

padding: 0 5px 0 5px;


}

.sidebar{
float: right;
width: 463px;
padding: 0 10px 0 10px;

margin: 0 3px 0 0;
display: inline;
color:#000000;

}

.sidebar a{
color:#3B57BB;
padding: 2px 0 2px 0;
display:inline;
font-weight:bold;
}

.sidebar a:hover {


color:#000000;

}
.subco{
font-size:10px;
}
.subco a{
font-weight:normal;
}

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 0 0 0;

}

.sidebar ul li{
padding: 0 0 10px 0;

}

.sidebar ul li a {


}

.sidebar ul li ul{
list-style-type: none;

}

.sidebar ul li ul li{
padding: 5px 0 5px 15px;
border-bottom:1px dotted #D5DBEF;
background: url(images/listicon.gif) center left no-repeat;


}

.lsidebar ul li h2{
font-family: 'Trebuchet MS', Georgia, Sans-serif;
font-size: 15px;
background: url(images/cattop.gif);
height:29px;
color:#ffffff;
width:160;
padding:2px 0 0 10px;
}

.rsidebar ul li h2{
font-family: 'Trebuchet MS', Georgia, Sans-serif;
font-size: 15px;
background-image: url(images/cattop3.gif);
background-repeat:no-repeat;
height:29px;
color:#ffffff;
width:160;
padding:2px 0 0 10px;
}

#rss {
border-bottom:1px dotted #cccccc;
margin:0 0 15px 0;
text-align:center;
}

}
#sbcacon td ul li{
border-style:none;
padding:0 0 0 0;
margin:0 0 0 0;
}



#sbcacon a{
display:block;
background:#E6E6E6;
margin:1px 0 1px 0;
padding:7px 0 7px 0;
border-style:none;
}

#sbcacon {
width:100%;
vertical-align:top;
}

#sbcat ul li ul li{
padding:0 0 0 0;
margin:0 0 0 0;
}

#sbar ul li ul li{
padding:0 0 0 0;
margin:0 0 0 0;
}

.srposts {
width:100%;
vertical-align:top;
}


.srposts a{
color:#3B57BB;
padding: 2px 0 2px 0;
display:inline;
font-weight:bold;
}

.srposts a:hover {


color:#000000;

}

.srposts ul li h2{
font-family: 'Trebuchet MS', Georgia, Sans-serif;
border-bottom:6px solid #E6E6E6;
height:29px;
font-size:12px;

padding:15px 0 0 10px;
}

.srposts ul{
list-style-type: none;
margin: 0;
padding: 0 0 0 0;

}

.srposts ul li{
padding: 0 0 10px 0;

}

.srposts ul li a {


}

.srposts ul li ul{
list-style-type: none;

}

.srposts ul li ul li{
padding: 5px 0 5px 15px;
border-bottom:1px dotted #D5DBEF;
background: url(images/listicon.gif) center left no-repeat;


}

.lsidebar { width: 166px; float: right; color: #000000; margin: 0 auto; display:inline; padding:0 7px 0 0; border-right:1px solid #cccccc;}
.rsidebar { width: 282px; float: right; color: #000000; margin: 0 auto; display:inline;padding:0 0 0 7px; }


table#wp-calendar{
width: 80%;
}

.commentlist{
background:#FCA4F3;

}

.comments-template{
margin: 10px 0 0;
border-top: 1px solid #ccc;
padding: 10px 0 0;

}

.comments-template ol{
margin: 0;
padding: 0 0 15px;
list-style: none;
background:#FCA4F3;

}

.comments-template ol li{
margin: 10px 0 0;
line-height: 18px;
padding: 0 0 10px;
border-bottom: 1px solid #ccc;

}

.comments-template h2, .comments-template h3{
margin: 10px 0 0 0;
font-family: Georgia, Sans-serif;
font-size: 16px;
}

.commentmetadata{
font-size: 12px;
margin: 10px 0 0 0;
padding: 10px;
color:#000000;
}

.commenttext{
color:#000000;
}

.comments-template p.nocomments{
padding: 0;
color:#000000;
}

.commentform input{
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
background:#E4EAFF;

}

.commentform textarea{
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
background:#E4EAFF;

}

blockquote {
background: #E4EAFF;

color: #000000;
border: 1px solid #4f4636;
padding: 20px;
}
blockquote blockquote{
background: #CAD6FF;
color: #000000;
border: 1px solid #4f4636;
padding: 15px;
}

#fimg{

}

#footer{
position:relative;
top:-25px;
clear: both;
margin: 0 auto 0 auto;
height:150px;
width: 950px;
display:block;

background-image: url(images/foot.gif);
background-position:center top;
background-repeat:no-repeat;
padding:5px 0 0 20px;
}


/* Menu */
#thememenu #homeb a{

background:transparent url(images/homeb.gif);
}

#thememenu #homeb a:hover{

background:transparent url(images/homeb2.gif);
}

#menucontainer{
background:transparent url(images/menuback.gif);
width: 900px;
clear:both;
height:30px;
float:left;
margin:0px 0 0px 17px;

}
#thememenu{

display:inline;
float:left;
height:29px;

font-size:12px;
padding:0 0 0 0;
font-family:Arial,Verdana,Helvitica,sans-serif;
}
#thememenu ul{
display:inline;
float: left;
margin:0px;
padding:0 0 0 0;
list-style-type:none;
width:auto;
background:#000000;

}
#thememenu ul li{
float:left;
display:inline;

margin:0 1px 0 0;
}
#thememenu ul li a{
display:inline;
float:left;
color:#fff;
text-decoration:none;
padding:6px 20px 0 20px;
height:24px;
background:transparent url(images/topbut.gif);
}
#thememenu ul li a:hover{
color:#D0ECFF;
background:transparent url(images/topbut2.gif);
}
#thememenu ul li a.current,#thememenu ul li a.current:hover{
color:#D0ECFF;
background:transparent url(images/topbut2.gif);
}

/* Calendar */
#wp-calendar {
margin: auto;
font-size: 11px;
color: #000000;
}
#wp-calendar caption {
font-size: 11px;
font-weight: bold;
color: #000000;
}
#wp-calendar th {
font-weight: bold;
font-size: 1em;

text-align: center;
}

#wp-calendar td a:hover {

background-color:#E4EAFF;
color:#000000;

}

#wp-calendar tr {
margin:0 0 0 0;
}
#wp-calendar #today {
border: 1px solid #000000;
}

#wp-calendar td {
color: #000000;
width: 18px;
text-align: center;
}
#wp-calendar a {

width: 18px;
background-image: none;
padding-left: 0px;
border-bottom: none;
text-align: center;
}
#wp-calendar a:hover {
color: #000000;
width: 18px;
background-image: none;
padding-left: 0px;
border-bottom: none;
text-align: center;
}
#wp-calendar #next a, #wp-calendar #next {
color: #000000;
padding-right: 0;
text-align: right;
width: auto;
font-weight: bold;
}
#wp-calendar #prev a, #wp-calendar #prev {
color: #000000;
padding-left: 0;
text-align: left;
width: auto;
font-weight: bold;
}

.row { clear: both; }
.col1 { width: 200px; float: left; padding: 0 10px; }
.col2 { width: 200px; float: right; padding: 0 10px; }

 

Did you try setting .sidebar to float:left? And you are pushing it on the size. Can reduce the sidebar size to 400 and see if it works then. Odds are even if it works FF, IE would balk.

 

ok hold on. let me try doing that.

 

still didn't working out. Thanks for suggesting though.

 

.lsidebar { width: 166px; float: right; color: #000000; margin: 0 auto; display:inline; padding:0 7px 0 0; border-right:1px solid #cccccc;}
.rsidebar { width: 282px; float: right; color: #000000; margin: 0 auto; display:inline;padding:0 0 0 7px; }

What's this? Would help if you posted a link reduces guess work.

 

Originally, this is a three column wordpress theme. (black-gloss theme). I have not done any changes specifically on its css. Just the index files.

 

Sorry I forgot the link. Here you go.

www.buyandsell-tradeonline.com

 

This is part of the problem. Plus you have more overlapping divs. The #content comes after the sidebar starts and I don't remember seeing #content in the CSS you posted.

<div class="sidebar" >

</div> <!-- end of #content -->
<div class="lsidebar">

So that lsidebar is being used instead of sidebar.
Validated it too. 6 errors, you got misplaced div tags. Fix those first and the sidebar will probably get fixed.