Sidebars failing on Sandbox 1.6.2 custom theme

• 

  braintreemencap · Member · Jun 28, 2012 at 3:12 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  braintreemencap · Member · Jun 28, 2012 at 3:13 pm

  • Copy link

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

• 

  designsimply · Member · Jun 28, 2012 at 3:37 pm

  • Copy link

  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 · Member · Jul 11, 2012 at 1:30 pm

  • Copy link

  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