Solved

sidebar wrapping in theme

Posted on 2011-03-03
11
1,025 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now