Solved

sidebar wrapping in theme

Posted on 2011-03-03
11
1,028 Views
Last Modified: 2012-05-11
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
Comment
Question by:BluesMama
  • 6
  • 5
11 Comments
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 250 total points
ID: 35029122
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
 

Author Closing Comment

by:BluesMama
ID: 35030707
I see what the problem was. Thank you very much!
0
 

Author Comment

by:BluesMama
ID: 35031405
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
Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35032604
I will take a look at it for you. Do you have it to the right currently?
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35032726
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
 

Author Comment

by:BluesMama
ID: 35033115
Ok, thanks for the closing tag heads up. I fixed that and took out the reset.css. It wasn't being used.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35033755
You're welcome, are you still needing help with the CSS?
0
 

Author Comment

by:BluesMama
ID: 35038257
Yes I do, for some reason, the sidebar isn't flush right and I was thinking of adding a margin-left to it.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35039263
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
 

Author Comment

by:BluesMama
ID: 35039299
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
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35039436
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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question