Need help? Check out our Support site, then

Sidebars failing on Sandbox 1.6.2 custom theme

  1. braintreemencap

    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('');<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 />

    The blog I need help with is

  2. braintreemencap

    I probably should have said: I would like the sidebar and text ending up centered, if possible.

  3. 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%

  4. braintreemencap

    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 ;)


Topic Closed

This topic has been closed to new replies.

About this Topic