[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

sidebar wrapping in theme

Posted on 2011-03-03
11
Medium Priority
?
1,040 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 1000 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

650 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