WordPress.com Forums » Topic: Sidebars failing on Sandbox 1.6.2 custom theme http://en.forums.wordpress.com/topic/sidebars-failing-on-sandbox-162-custom-theme WordPress.com Forums » Topic: Sidebars failing on Sandbox 1.6.2 custom theme en Sun, 26 May 2013 09:29:16 +0000 http://bbpress.org/?v=1.1-alpha-2539 braintreemencap on "Sidebars failing on Sandbox 1.6.2 custom theme" http://en.forums.wordpress.com/topic/sidebars-failing-on-sandbox-162-custom-theme#post-939791 Wed, 11 Jul 2012 13:30:55 +0000 braintreemencap 939791@http://en.forums.wordpress.com/ Dear designsimply,

Thanks for your help - while I did in the end figure this out before I was just alerted of your post, I made a few changes based on your advice.

I guess I had just been working for a bit too long - couldn't see for all of the looking ;)

Thanks,
Will

]]> designsimply on "Sidebars failing on Sandbox 1.6.2 custom theme" http://en.forums.wordpress.com/topic/sidebars-failing-on-sandbox-162-custom-theme#post-927618 Thu, 28 Jun 2012 15:37:47 +0000 designsimply 927618@http://en.forums.wordpress.com/ First, you've made the container tag 100% wide and then tried to place the sidebar to the left of it. When layout elements are floated and you're using more than 100% of the width, the elements will float around each other on the page and that's why your sidebar is falling.

Sometimes, it helps to put a temporary border around elements to help you visualize them. Here is an example you could try as a first step so you can see how the spacing is working with your current setup.

#container {
	border: 2px dashed DodgerBlue;
}
.sidebar {
	border: 2px dashed Lime;
}

Of course, remove those after your done looking at the spacing.

To get the current CSS you've added back on track try starting with these steps:

1. If you don't want the site to span the width of the entire browser window, set a pixel width on the wrapper ID and center it like this:

#wrapper {
	width: 980px;
	margin: 0 auto;
}

Adjust the 980px number to your liking.

2. Find the "#container" block in your CSS, and change the width to 74%

3. Find the "div#content" block in your CSS, and change the width to 100%

4. Find the "div#primary.sidebar" block in your CSS, and change the width to 25%

]]> braintreemencap on "Sidebars failing on Sandbox 1.6.2 custom theme" http://en.forums.wordpress.com/topic/sidebars-failing-on-sandbox-162-custom-theme#post-927594 Thu, 28 Jun 2012 15:13:25 +0000 braintreemencap 927594@http://en.forums.wordpress.com/ I probably should have said: I would like the sidebar and text ending up centered, if possible.

]]> braintreemencap on "Sidebars failing on Sandbox 1.6.2 custom theme" http://en.forums.wordpress.com/topic/sidebars-failing-on-sandbox-162-custom-theme#post-927592 Thu, 28 Jun 2012 15:12:02 +0000 braintreemencap 927592@http://en.forums.wordpress.com/ It seems virtually impossible to have a sidebar aligned to the left of the "container" box. No matter how much I try, it always goes beneath it, or in random places. I cannot fathom why this is, *shrugs*.

Any help would be greatly appreciated. The custom CSS is here:

<br /> * {<br /> margin:0;<br /> padding:0;<br /> }</p> <p>#container {<br /> /*float:right;*/<br /> /*display:inline;*/<br /> background-color:teal;<br /> margin-right:auto;<br /> margin-left:auto;<br /> width:800px;<br /> }</p> <p>div#content {<br /> width:100%;<br /> margin-left:auto;<br /> margin-right:auto;<br /> margin-top:1em;<br /> background-color:salmon;<br /> }</p> <p>h1#blog-title a {<br /> font-size:0;<br /> }</p> <p>div#blog-description {<br /> font-size:0;<br /> }</p> <p>a:link {<br /> color:#A6003E;<br /> text-decoration:none;<br /> }</p> <p>a:visited {<br /> color:#A6003E;<br /> text-decoration:none;<br /> }</p> <p>a:hover {<br /> text-decoration:underline;<br /> }</p> <p>a:active {<br /> color:#A6003E;<br /> text-decoration:none;<br /> }</p> <p>#header {<br /> background-image:url('http://i.imgur.com/WWebL.png');<br /> background-repeat:no-repeat;<br /> background-position:top center;<br /> height:180px;<br /> padding-top:20px;<br /> margin-top:5px;<br /> }</p> <p>.skip-link {<br /> position:absolute!important;<br /> clip:rect(1px 1px 1px 1px);<br /> }</p> <p>#access ul li {<br /> float:left;<br /> list-style:none;<br /> margin-right:20px;<br /> margin-bottom:0;<br /> padding:5px;<br /> width:80px;<br /> text-align:center;<br /> font-family:arial;<br /> }</p> <p>#access ul li a {<br /> color:#444;<br /> font-weight:bolder;<br /> }</p> <p>#access ul li a:hover {<br /> color:#75AADB;<br /> text-decoration:none;<br /> }</p> <p>#access {<br /> margin-left:auto;<br /> margin-right:auto;<br /> padding-bottom:13px;<br /> width:100%;<br /> height:1em;<br /> padding-top:3px;<br /> font-size:12pt;<br /> border-bottom:1px solid gray;<br /> }</p> <p>.menu {<br /> width:70%;<br /> margin-right:auto;<br /> margin-left:auto;<br /> }</p> <p>div#primary.sidebar {<br /> background-color:tomato;<br /> overflow:hidden;<br /> width:200px;<br /> /*display:inline;*/<br /> /*margin-right:auto;<br /> margin-left:auto;*/<br /> }</p> <p>div#secondary.sidebar {<br /> display:none;<br /> clear:left;<br /> }</p> <p>h2.entry-title {<br /> color:#75AAE5;<br /> }</p> <p>#footer {<br /> width:0;<br /> font-size:0;<br /> }<br />

]]>