-3

I’m having a CSS problem with my sidebar area in one of my pages as you can see here: [click here]

I’ve changed the margin-top to –2470px because its currently the only way to get the sidebar to show at all. However once you resize the window it floats all over the place.

How can I fix this in place?

Thank you!

Edit: Got it sorted now! Thank you everyone!

Community
  • 1
  • 1
user1015140
  • 1
  • 3
  • 2
    what problem?? what sidebar?? can you place the snapshot of the problem with red circle? – Manish Mishra Mar 05 '13 at 09:40
  • Sorry here you are: img199.imageshack.us/img199/8333/40472931.jpg Try to resize the page, you'll see that the right sidebar floats around. Thank you! – user1015140 Mar 05 '13 at 09:50
  • There's too much going on at your example page to helpfully diagnose the problem. Try and reduce this down to a simple test case and put it on a site like [jsFiddle](http://jsfiddle.net). Looking at your markup, it appears as if you're confusing `float` with `position` (e.g. you are setting it up to use absolute positioning with a 34% margin on your `div#content`), and then trying to float the sidebar. – CherryFlavourPez Mar 05 '13 at 09:52

4 Answers4

0

You need to put the sidebar in your #container div, at same level of #content div and apply a "float:left" and width for both, You can see it in css frameworks like bootstrap or 960gs

<div id="container">
     <div id="content"></div>
     <div id="sidebar">your sidebar here</div>  
</div>
Joan Caron
  • 1,969
  • 18
  • 21
0

The sidebar "#primary" should be inside "#container" without margin-top, so that sidebar and "#content" is sibling now then you can use the float left for "#content" and "#primary" which you already did for sidebar.

body.single-property #container #content { 
  margin: 0; width: 68.4%%;
  float:left
}

body.single-property #primary.widget-area {
  float: right;
  margin-right: 70px;
  width: 16%;
}

body.single-property #container {
  margin: 0 -26.4% 0 0;
  width: 100%;
  min-width: 960px;

}

max
  • 391
  • 6
  • 16
0

Dont't make your content width:100% from start. If you do so and add 20% margin-right of course there is nothing more to fit in there Make your content and your sidebar float:left and take out all that margin:20% ar what is there. Here is an example based on what you have:

<div class="main">
<div class="content"></div>
<div class="primary"></div>
</div>

.main{width:100%;}
.main > div{float:left}
.main .content{width:70%:}
.main .primary{width:30%}
Dan Ovidiu Boncut
  • 3,083
  • 4
  • 25
  • 45
-1

I suggest you remove all floating properties from your blocks and use css tables for a smooth and easy solution:

#main {
    display: table;
    padding: 0.5em 15px 0;
}

body.single-property #container {
    display: table-cell;
    width: 80%;
}

body.single-property #primary.widget-area {
    display: table-cell;
    width: 20%;
}

Just remember to remove all floating properties from your elements, even from their child blocks. I tested it using firebug and works smoothly.

otinanai
  • 3,987
  • 3
  • 25
  • 43