CODEWITHSUNDEEP
cssmargin
user1721135
user1721135

Reputation: 7092

negative margin layout shifts on small window size

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/

Upvotes: 0

Views: 301

Answers (1)

Peter Oram
Peter Oram

Reputation: 6738

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.

Upvotes: 1

Related Questions