sidebar wrapping in theme

I have a web site page where the sidebar seems to be wrapping
http://www.seedowntowndekalb.com/sample-page

How can I unwrap it?
BluesMamaAsked:
Who is Participating?
 
jeremyjared74Commented:
You needed to define a width for your .content, #container, and .post. Then I floated the sidebar left and the post right. Here is the CSS for your style.css:
/*
	Theme Name: SEE DeKalb
	Theme URL: http://seedowntowndekalb.com
	Description: SEE DeKalb custom theme
	Author: Web Girl Consulting
	Author URI: http://webgirlconsulting.com/
	Version: 1.0
*/

/* LAYOUT */
body {
	background: #F9F7ED;
	}

@font-face {
  	font-family: 'Droid Sans';
        font-style: normal;
        font-weight: normal;
src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/font?kit=s-BiyweUPV0v-yRb-cjciC3USBnSvpkopQaUR-2r7iU') format('truetype');
}

@font-face {
       font-family: 'Droid Sans';
       font-style: normal;
       font-weight: bold;
src: local('Droid Sans Bold'), local('DroidSans-Bold'), url('http://themes.googleusercontent.com/font?kit=EFpQQyG9GqCrobXxL-KRMfEr6Hm6RMS0v1dtXsGir4g') format('truetype');
}

#wrapper {
	}

#container {

         width: 1100px;
	}

#contentwrap {
	background:# ;
	}

a {
	color: #636466;
        text-decoration: underline;
	}

a:hover {
	color: #00AEE8;
	}

#business {
	margin-bottom:40px;

}
#business p{
	padding-left:240px;
	margin:10px;
}

#Movies {
	width: 980px;
	margin: 16px auto auto;
	padding-left: 40px;
	}
#Moviescontent {
	width: 100%;
	margin: 16px auto auto;
	padding-left: 180px;
	}

.MovieContainer {
	float: left;
	position: relative;
	text-align: center;
	}
.MovieContainer>.MovieImage {
	position: relative;
	width: 258px;
	height: 258px;
	margin-bottom: 15px;
	}

.MovieContainer>.MovieImage.Webdesign {
	background-image: url('images/shop_trans.png');
	background-repeat: no-repeat;
	}

.MovieContainer>.MovieImage.Vindbaarheid {
	background-image: url('images/eat_trans.png');
	background-repeat: no-repeat;
	}

.MovieContainer>.MovieImage.Ads {
	background-image: url('images/enjoy_trans.png');
	background-repeat: no-repeat;
	}

.MovieContainer>h2 {
	font-size: 16px;
	margin-bottom: 5px;
        font-weight:bold;
	}

.MovieContainer>p {
	font-size: 14px;
	color: #888787;
}

#Socials {
	width: 822px;
	margin: 6px auto 0px auto;
	text-align: center;
	height: 100px;
	}

#Socials>h2 {
	color: #7A7979;
	font-size: 12px;
	}

ul#Networks {
	margin-top: 18px;
	width: 800px;
	}

ul#Networks>li {
	float: left;
	width: 400px;
	list-style-type: none;
	color:#636466;
	}
            
ul#Networks>li>div {
	position: relative;
	text-align: left;
	width: 250px;
	height: 68px;
	list-style-image:none;
	}

ul#Networks>li>div>img {
	width: 64px;
	height: 64px;
	padding: 4px 4px 12px 4px;
	list-style-image:none;
	}

ul#Networks>li>div>a {
	width: 142px;
	height: 25px;
	position: absolute;
	top: 25px;
	left: 88px;
	list-style-image:none;
					}
 #wrap{
	margin:0px auto;
	text-align:left;
	width:980px;
	position: relative;
}
/* HEADER */

#header {
	width: 980px;
	margin: 12px auto 18px auto;
	height: 333px;
}

#header>#logo {
	float: left;
	width: 310px;
	background: url('images/see_dekalb_trans.png') no-repeat 0px 0px;
	height: 233px;
	}
  
.logoimg {
  	float: left;
	width: 310px;
	background: url('images/see_dekalb_trans.png') no-repeat 0px 0px;
	height: 233px;
	}

#logosmall{
	float:left;
	background: url('images/see_dekalb_trans_sm.png') no-repeat 0px 0px;
	width: 215px;
	height: 175px;
	margin-top: 10px;
	margin-right: 150px;
	}

#header>#rightbox {
	width:557px;
	float:right;
	padding-top: 5px;
	}

#header>#rightbox_sm {
	float:right;
	padding-top: 5px;
	padding-left: 225px;
}

#title {
	font-size:26px;
	}

.text {
       padding-left:20px;
       width:360px;
       font-size:14px;
       }
#events {
       padding-top:60px;
       background:url('images/home_bg.png') no-repeat;
       min-height: 165px;
       }

#events p {
	font-size:14px;
	background:none;
	line-height:16px;
	padding-left: 50px;
	padding-top: 15px;
}

#events  a{
	text-decoration:none;
	color: #636466;
} 

#events ul li {
	font-size:14px;
	background:none;
	line-height:30px;
	padding-left: 40px;
	padding-top: 10px;
	list-style-type: none;
	}

#events ul li a{
	text-decoration:none;
	color: #636466;
	} 

/* NAVIGATION MENUS */

#pagemenucontainer {
    	margin-top: 34px;
	height: 30px;
    	float: right;
	}
	
#pagemenu {
	height: 30px;
        float: right;
	}

#pagemenu, #pagemenu ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	}
#pagemenu {
	margin-bottom: 1px;
	}
	
#pagemenu ul {
	float: left;
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	}
	
#pagemenu li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#pagemenu ul li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#pagemenu li a, #pagemenu li a:link {
	color: #4E4D4D;
	display: block;
        margin: 0 0 0 20px;
	padding: 8px 4px;
	text-decoration: none;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	}
	
#pagemenu li a:hover, #pagemenu li a:active {
	color: #C96313;
	display: block;
	text-decoration: none;
        background: url('images/pagenav-hover.png') left bottom repeat-x;
	}
	
#pagemenu  li.current_page_item a {
	color: #C96313;
	text-decoration: none;
        background: url('images/pagenav-hover.png') left bottom repeat-x;
	}

#pagemenu li:hover, #pagemenu li.sfhover { 
	position: static;
	}
	
.topright {
	text-align: right;
        margin: 16px 0 0 0;
	}

#navcontainer {
	height: 40px;
	display: block;
	overflow: hidden;
        padding: 0 0 0 10px;
        background: url('images/nav-background.png') top left repeat-x;
	}
    
#navcontainer .current-cat a {
	background: url('images/nav-background-hover.png') left center repeat-x;
	color:#fff;
	}
	
/* CONTENT */
#post {
width: 600px !important;
}
#content {
        display: block;
        float: right;
	padding: 15px;
        color: #636466;
        widht: 620px !important;
        clear: both;
	}
h1,h2,h3,h4,h5 {
       color: #636466;
       }
	
pre { overflow: auto; 
	width: 470px; 
	}
	
.post {
	padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #F4F4EC;
	}

.post p {
	margin-bottom: 10px;
	}

.readmorecontent {
	text-align: right;
	}

a.readmore {
	padding: 4px 15px;
	background: #52483B;
	color: #fff;
	text-decoration: none;
        font-size: 12px;
        font-weight: bold;
	}

a.readmore:hover {
        color: #fff;
	background: #E86927;
	}

.postdate {
	font-size: 12px;
	padding: 1px 0px;
	color: #666;
	}

.postmeta {
	font-size: 12px;
	padding: 2px 4px;
	color: #8F7F67;
	}
	
.postdate img, .postmeta img {
	border: none;
	vertical-align: middle;
	margin:2px;
	}
	
.entry {
        width: 600px;
	text-align: justify;
	line-height: 20px;
	padding-top: 8px;
	font-size: 14px;
        background: #F9F9F2;
	border: 1px solid #ECECEB;
	padding: 10px;
	}
    
.navigation {
	padding: 10px 0;
	}

blockquote {
	overflow: hidden;
	padding-left: 9px;
	font-style: italic;
	color: #666;
	border-left: 3px solid #CADAE7;
	}
	
.post img {
	max-width: 680px;
	}

img.wp-smiley {
	max-height: 12px;
	margin: 0;
	padding: 0;
	border: none;
	}
	
.aligncenter,
div.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
	}

.alignleft {
        float: left;
	}

.alignright {
        float: right;
	}

.wp-caption {
        border: 1px solid #ddd;
        text-align: center;
   	background-color: #f3f3f3;
   	padding-top: 4px;
   	margin: 10px;
   	/* optional rounded corners for browsers that support it */
       -moz-border-radius: 3px;
       -khtml-border-radius: 3px;
       -webkit-border-radius: 3px;
        border-radius: 3px;
	}

.wp-caption img {
        margin: 0;
        padding: 0;
        border: 0 none;
	}

.wp-caption p.wp-caption-text {
        font-size: 11px;
        line-height: 17px;
        padding: 0 4px 5px;
        margin: 0;
	}

/* wp-pagenavi */
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active {
       font-size: 15px !important;
       padding:  4px 8px !important;
       color: #52483B !important;
       background:none !important;
       border: 0 !important;
       }
.wp-pagenavi a:hover {
       border: 0 !important;
       color: #fff !important;
       background:#52483B !important;
       border: 0 !important;
       }
.wp-pagenavi span.pages {
       font-size: 15px !important;
       padding:  4px 8px !important;
       color: #52483B !important;
       background: none !important;
       border: 0 !important;
       }
.wp-pagenavi span.current {
       font-size: 15px !important;
       padding:  4px 8px !important;
       font-weight: bold;
       color: #fff !important;
       background:#E86927 !important;
       border: 0 !important;
       }
.wp-pagenavi span.extend {
       font-size: 15px !important;
       padding:  4px 8px !important;
       background:transparent !important;
       color: #52483B !important;
       background: none !important;
       border: 0 !important;
       }

/* SIDEBAR(S) */

.sidebaradbox {
	margin-top: 5px; 
	text-align:center;
	}
	
.ad125 {
	margin: 10px 6px;
	}
#content: {
right: 0 !important;
position: absolute;
widht: 400px !important;
}
.sidebar {
	margin: 15px 10px 10px 10px;
        font-size: 13px;
        color: #636466;
        clear: both;
        display:block;
        width: 300px;
	}
	
.sidebar a {
	text-decoration: none;
	color: #636466;
	}

.sidebar a:hover {
	text-decoration: none;
	color: #636466;
	}
		
#search {
        border: 1px solid #ECECEB;
        height: 26px;
        padding: 2px;
        background: #F9F9F2;
        text-align: right;
        }

#search input {
	border: 0;
        background: none;
        color: #A2988C;
        }
		
#s {
	width: 247px;
	padding: 3px;
        margin:2px 0 0 0;
        background: none;
        }
		
/* Social icons */
.sidebarvideo {
	}
    

.socialboxes {
	background: #F9F9F2;
	border: 1px solid #ECECEB;
	padding: 10px;
	margin: 10px 0 0 0;
	}
    
.socialboxes:hover {
        border: 1px solid #D9D9CF;
        background: #F9F9F2;
        }

.socialboxes a {
	color: #636466;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	}
.socialboxes a:hover {
	color: #636466; 
	text-decoration: underline;
	}

.sidebar h2 {
	margin: 10px 0 0 0;
	padding: 8px 0 14px 0;
	background: url('images/sidebar-tab.png') left bottom repeat-x;
	font-size: 18px;
        line-height: 18px;
	font-weight: bold;
	text-transform: uppercase;
	color: #636466;
	}

.sidebar ul {
	list-style-type: none;
	margin: 0px 0px 10px 0px;
	padding: 0px;
	}
	
.sidebar ul li {
	list-style-type: none;
	margin: 0px 0px 5px 0px;
	padding: 0px;
	}

.sidebar ul ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	}
	
.sidebar ul li li, .sidebar ul li ul li {
	padding: 6px 0px 6px 0;
    border-bottom: 1px solid #F4F4EC;
	margin: 0;
	}


#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
	color: #958877;
	background: none!important;
	}
#wp-calendar caption {
	padding: 2px 4px;
	text-transform: uppercase;	margin: 2px 0 2px 0;
	background:  none !important;
    color: #958877;
	}

#wp-calendar td {
	color: #958877;
	letter-spacing: normal;
	padding: 2px 0;
	text-align: center;
	}

#wp-calendar td:hover, #wp-calendar #today {
	background: #52483B;
	color: #fff;
	}

#wp-calendar td:hover a {
    color: #fff;
}

#wp-calendar {
	empty-cells: show;
	font-size: 14px;
	margin: 0;
	font-weight: bold; 
	width: 100%;
	}


/* FOOTER */

#footer {
    margin-top: 29px;
    background-color: #FCD34D;
    padding: 10px 20px;
    width: 100%;
    min-height: 160px;
    }

#footer a {
    color: #636466;
    } 

#footer a:hover {
    color: #36BEEF;
    text-decoration: none;
    } 
	
#footer2 {
    color: #F9F7ED;
    font-size: 8px;
    text-align: center;
    padding: 10px;
    }
    	
#footer2 a {
    color: #F9F7ED;
    text-decoration: none;
    } 

#footerContent {
    width: 920px;
    margin: 0px auto;
    text-decoration: none;
    color:#636466;
    background-color: #FCD34D;
    }
#footerContent ul#BigNavigation,#ContactInfo {
    width: 320px;
    float: left;
    }
#ContactInfo {
    height:auto;
    padding-left:20px;
    border-right: 1px solid #D9D9CF;
    }
#footerContent ul#BigNavigation>li {
    font-size: 18px;
    }
#footerContent ul#BigNavigation>li>a:hover {
    color: #636466;
    }
#footerContent #ContactInfo>h2 {
    font-size: 18px;
    }
#footerContent #ContactInfo>p {
    font-size: 12px;
    margin-bottom: 5px;
    }
#footerContent #ContactInfo>a {
    font-size: 12px;
    margin-bottom: 5px;
    }
#footerContent #ContactInfo a:hover {
    color:#33BEEF;
    }
#footerContent #SmallNavigationLeft,#SmallNavigationRight {
    width: 190px;
    height:110px;
    float: left;
    border-left: 1px solid #636466;
    padding-left:25px;
    }
	
/* COMMENTS */

#comments h3 {
	margin-bottom: 10px;	
}

#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0;
	}

#commentform {
	margin: 5px 10px 0 0;
	}
	
#commentform textarea {
	width: 100%;
	padding: 2px;
	}
	
#respond:after {
		content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;
	}
	
#commentform #submit {
	margin: 0 0 5px auto;
	float: right;
	}

.alt {
	margin: 0;
	padding: 10px;
	}

.commentlist {
	padding: 0;
	text-align: justify;
	}

.commentlist li {
	margin: 15px 0 10px;
	padding: 5px 5px 10px 10px;
	list-style: none;

	}
	
.commentlist li ul li { 
	margin-right: -5px;
	margin-left: 10px;
}

.commentlist p {
	margin: 10px 5px 10px 0;
}
.children { padding: 0; }

#commentform p {
	margin: 5px 0;
	}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}

.commentmetadata {
	margin: 0;
	display: block;
	}
	
.post_thumbnail {
    padding: 6px;
    border: 2px solid #F4F4EC;
    margin: 0 10px 10px 0;
}

Open in new window

0
 
BluesMamaAuthor Commented:
I see what the problem was. Thank you very much!
0
 
BluesMamaAuthor Commented:
I wanted the sidebar on the right however when I do that, the right sidebar is right up against the content. Can I set a left-margin to create some space or widen the content?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
jeremyjared74Commented:
I will take a look at it for you. Do you have it to the right currently?
0
 
jeremyjared74Commented:
Before I can make any suggestions, you need to fix a few things.
I believe you have missed a closing ?> tag in your header. If you check the CSS output it, the reset.css is displaying your header.php code not CSS style.
0
 
BluesMamaAuthor Commented:
Ok, thanks for the closing tag heads up. I fixed that and took out the reset.css. It wasn't being used.
0
 
jeremyjared74Commented:
You're welcome, are you still needing help with the CSS?
0
 
BluesMamaAuthor Commented:
Yes I do, for some reason, the sidebar isn't flush right and I was thinking of adding a margin-left to it.
0
 
jeremyjared74Commented:
Hello BluesMama:
I can't get the CSS working correctly because you have some unclosed div's. I see the reset.css is messed up again also. Here is a screenshot of your div order so it may help you, and a link to your W3C HTML Validation output:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.seedowntowndekalb.com%2F


DIV-ORDER.jpg
0
 
BluesMamaAuthor Commented:
I'll go in and check it out. Thank you for all of your help. I was able to fix the alignment by adding some margin. http://www.seedowntowndekalb.com/sample-page
0
 
jeremyjared74Commented:
I also notice a lot of padding in your CSS. A word of caution about using padding:
When you use padding it will increase the size of the container. If your header is set to:
H= 400px
W= 900px,

and you give it padding: 10px; then your header would be:
H= 420px;
W=920px;


Sometimes you need padding, but for positioning it is best to use margin: 10px; This will save you a lot of headaches in the long run.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.