WordPress.com

1. braintreemencap
   Member
   Jun 28, 2012, 3:12 PM

   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 />

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

2. braintreemencap
   Member
   Jun 28, 2012, 3:13 PM

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

3. designsimply
   Staff
   Jun 28, 2012, 3:37 PM

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

   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

Topic Closed

This topic has been closed to new replies.