Question

Im experiancing a weird problem with my layout, it looks fine on full window but begins to shift to the right as i resize the window.

The requirement is to have 3 full height columns 2 of which have fixed width, the other taking up the rest of the space.

I have no control over the html which looks like this:

<div id="wrapper">
  <div id="main">

     <div id="nav">
     </div>

     <div id="container">
       <div id="content">
       </div>
       <div id="sidebar">
       </div> 
     </div>        
  </div>
</div>

I came up with a method to do all this using negative margins and relative positioning, works fine, except that when the window is very small, the whole content shifts to the right. I there an easy solution to do prevent this? I would also like to know why this happens, as i cant wrap my mind around this.

JSFIDDLE:

http://jsfiddle.net/u5yJd/

Answer 1

Two fixes in your CSS:

• on #wrapper nuke the margin-left and set left: 0px;
• on #main add left: 264px;

Fixed fiddle with just those changes.

Your #wrapper was way off to the left of the window and you want your #wrapper (in this case) in the window as otherwise positioning against it gets a bit funky.