Sidebars failing on Sandbox 1.6.2 custom theme

  • Author
    Posts
  • #930674

    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:


    * {
    margin:0;
    padding:0;
    }

    #container {
    /*float:right;*/
    /*display:inline;*/
    background-color:teal;
    margin-right:auto;
    margin-left:auto;
    width:800px;
    }

    div#content {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
    background-color:salmon;
    }

    h1#blog-title a {
    font-size:0;
    }

    div#blog-description {
    font-size:0;
    }

    a:link {
    color:#A6003E;
    text-decoration:none;
    }

    a:visited {
    color:#A6003E;
    text-decoration:none;
    }

    a:hover {
    text-decoration:underline;
    }

    a:active {
    color:#A6003E;
    text-decoration:none;
    }

    #header {
    background-image:url('http://i.imgur.com/WWebL.png');
    background-repeat:no-repeat;
    background-position:top center;
    height:180px;
    padding-top:20px;
    margin-top:5px;
    }

    .skip-link {
    position:absolute!important;
    clip:rect(1px 1px 1px 1px);
    }

    #access ul li {
    float:left;
    list-style:none;
    margin-right:20px;
    margin-bottom:0;
    padding:5px;
    width:80px;
    text-align:center;
    font-family:arial;
    }

    #access ul li a {
    color:#444;
    font-weight:bolder;
    }

    #access ul li a:hover {
    color:#75AADB;
    text-decoration:none;
    }

    #access {
    margin-left:auto;
    margin-right:auto;
    padding-bottom:13px;
    width:100%;
    height:1em;
    padding-top:3px;
    font-size:12pt;
    border-bottom:1px solid gray;
    }

    .menu {
    width:70%;
    margin-right:auto;
    margin-left:auto;
    }

    div#primary.sidebar {
    background-color:tomato;
    overflow:hidden;
    width:200px;
    /*display:inline;*/
    /*margin-right:auto;
    margin-left:auto;*/
    }

    div#secondary.sidebar {
    display:none;
    clear:left;
    }

    h2.entry-title {
    color:#75AAE5;
    }

    #footer {
    width:0;
    font-size:0;
    }

    The blog I need help with is braintreemencap.wordpress.com.

    #930745

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

    #930759

    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%

    #930902

    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

The topic ‘Sidebars failing on Sandbox 1.6.2 custom theme’ is closed to new replies.