Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1042
  • Last Modified:

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?
0
BluesMama
Asked:
BluesMama
  • 6
  • 5
1 Solution
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now