How to move sidebar and content area over

[mariahneu]

I currently use WordPress to edit my website, however, I can't figure out how to move the Sidebar and the content page over to the left so it's in line with the top-navigation menu.

My website's at <snip>

Here's what I want to do: <snip>

How do I edit the CSS so this occurs?

Here is the CSS:

body {
margin:0;
padding:0;
background: #cbe86b;
background: url('http://example.com/wp-content/themes/velociteen/Four.jpg'); background-attachment: fixed;
color:#030736; 
text-align:left;
font-family: Arial, sans-serif;
font-size:12px;
}
#container{
background:white;
border:0px red solid;
width:825px;
margin:0 0 0px 0;}
#header {
width : 825px;
height : 275px;
margin : 0 0 0 0;
background : url('http://example.com/wp-content/themes/velociteen/Banner%203.jpg') no-repeat;
}
#wrapper{
width:800px;
margin:0px auto;}
#content { 
margin: 20px 0 0 0;
width:530px;
float:left;
}
#sidebar{
float:right;
width:220px;
height:100%;
margin:10px 0 0 0;
}
.sidebar{
padding:5px;
margin:0 0 10px 0;
border:1px solid #03073;
background-color:#cbe86b;
}
#sidebar ul li{
list-style:none;
padding: 6px 3px;
border-bottom:none;
border-bottom: 1px dotted #030736;}
#sidebar ul{
list-style:none;
padding: 6px 3px;
margin:0;}
#footer {
border:0px red solid;
margin:10px 0;
padding:0px;
width:825px;
clear:both;
}
.footercol{
border:0px solid #030736;
width:218px;
padding:15px;
margin:0 5px;
float:left;}
.footercol2{
border:1px solid #030736;
background-color:#030736;
width:218px;
padding:15px;
margin:0 5px;
float:right;}
#copyright{
padding:20px 50px;
clear:both;
border-top:10px solid #030736;
background-color:#cbe86b;}
/*Nav styling*/
#navigation {
background: #030736;
border-top:1px solid #030736;
border-bottom:1px solid #030736;
width:825px;
color: #cbe86b;
font-weight:bold;
float:left;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;}
#navigation li {
margin: 0;
float: left;}
#navigation li a {
display: block;
text-align: center;
color: #cbe86b;
padding: 15px 20px;}
html>body #navigation li a {
width: auto;
}
#navigation li a:
 {
background-color: #cbe86b;
color: #030736;
}
/* sub menu */
#subnav {
clear:both;
float:left;
background: #47133c;
}
#subnav ul {
margin: 0px;
padding: 3px 0px 18px 5px;
list-style: none;
font: 11px/100% Arial, Helvetica, sans-serif;
}
#subnav li {
border-right: 1px solid #0d4775;
border-left: 1px solid #0d4775;
padding: 5px 7px;
margin: 0px;
float: left;
}
#subnav li a, #subnav li a:visited, #subnav .page_item {
text-decoration: none;
color: #030736;
}
#subnav .current_page_item a, #subnav .current_page_item a:visited {
color: #30261c;
}
#subnav li a:hover {
text-decoration: none;
color: #FFFFFF;
}
h1{
font-weight:lighter;
border-bottom:1px solid #871a44;
color:#030736;
font-size:18px;}
h2{
font-weight:lighter;
color:#030736;
font-size:16px;}
a {
color:#780001;
text-decoration:none;
}
a:hover {
color:#030736;
text-decoration:none;
}
.clear{clear:both;}
.post, .wrapper{
margin:0 0 10px 0;
padding:15px;
border:1px solid #ccc;
background-color:#FFFFFF;}
.alignright {
float: right;
}
.alignleft {
float: left;
}
.alignleft a, .alignright a{
display: block;
background-color:#871a44;
color:#000000;
padding:8px;}
.alignleft a:hover, .alignleft a:hover{
background-color:#871a44;
color:#030736;}
.navigation {
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 60px;
}
#commentform #author, #commentform #email, #commentform #url {
background: #871a44;
padding: .2em;
border: 1px solid #871a44;
}
.commentlist li, #commentform input, #commentform textarea {
font-weight:normal;
}
.commentlist li .avatar { 
float: right;
border: 1px solid #871a44;
padding: 2px;
background: #871a44;
}
.commentlist cite{
font-weight: normal;
font-style: normal;
font-size: 1.1em;
}
.commentlist cite a {
color:#ff3399;
font-weight: normal;
font-style: normal;
font-size: 1.1em;
}
.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}
.commentmetadata {
font-weight: normal;
margin: 0;
display: block;
}
#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}
#commentform textarea {
width:95%;
border: 1px solid #871a44;
background: #FFFFFF;
padding: .2em;
}
#commentform #submit {
margin: 0;
float: left;
}
.alt {
background-color: #871a44;
border-top: 1px solid #871a44;
border-bottom: 1px solid #871a44;
margin: 0;
padding: 5px;
}
.commentlist {
padding: 0;
text-align: justify;
}
.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}
.commentlist p {
margin: 10px 0 10px 0;
}
.nocomments {
text-align: center;
margin: 0;
padding: 0;
}
/*styling for wp-cal*/
#wp-calendar {
empty-cells: show;
font-size: 9px;
margin: 0;
width:100%;
}
#wp-calendar #next a {
padding-right: 9px;
text-align: right;
}
#wp-calendar #prev a {
padding-left: 9px;
text-align: left;
}
#wp-calendar a {
display: block;
text-decoration: none;
}
#wp-calendar a:hover {
color: #030736;
}
#wp-calendar caption {
color: #666;
font-size: 9px;
text-align: left;
 font-weight: normal;
}
#wp-calendar td {
color: #666;
font: normal 10px verdana, "Trebuchet MS", arial, tahoma, sans-serif;
letter-spacing: normal;
padding: 2px 0;
text-align: center;
}
#wp-calendar td.pad:hover {
background: #ddd;
}
#wp-calendar td:hover, #wp-calendar #today {
background: #eaeaea;
color: #030736;
}
#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}

Thanks!

No URL's please, see TOS [webmasterworld.com]

[edited by: limbo at 11:15 am (utc) on Jan. 27, 2010]

[limbo]

Hi mariahneu

Welcome to WebmasterWorld [webmasterworld.com] :)

Did you find an answer to your problem? A quick scan of your HTML and CSS and it looks like you have padding and widths set on the same container - this will cause issues as browsers handle this in different ways. Look up 'box model hack' for more info.

Also, ensure your HTML and CSS are valid and that you have 'reset' your CSS.