How to Move Sidebar and Content Area Over

HTML & CSS
1

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.

How do I edit the CSS so this occurs?

Here is the CSS:

body {
margin:0;
padding:0;
background: #cbe86b;
background: url('http://flowersitters.com/wp-content/themes/velociteen/Bubble%20Girl%20Four.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://flowersitters.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!

2

It’s not really clear what you mean by moving to the left to be in line. Looking at your site, that’s how they appear. I’m looking in Firefox. What are you seeing, and what browser are you looking in?

3

Hi, The #navigation is 825px wide so there is not likely to be much room to have anythign else on the same line (though I don’t have the HTML so I can’t look at this locally.

Posting a link would get this solved faster :slight_smile:

4

Heh heh, the link is in the code selection:

http://flowersitters.com/

5

Hi, I don’t understand what you mean. If you want the content/sidebar upside the navigation, then mass scrollbars appear from everything totaling a huge width, and quite frankly it looks horrible.

Can you post an image of what the desired outcome is supposed to look like? And a particular browser(s) appearing wrong?