Question

I’m using two css files [for my fluid width site here][1]: one where the left hand nav is ‘display:none’ when below a certain width.

I’m setting the right hand nav (with banners) to max-width:348px and a padding-left:20px.

The problem happens when I set the #main-content div to a percentage width: it doesn’t resize correctly and causes it to drop down below the right nav when the window’s reduced. It doesn’t really make sense so not sure how the best way to go about it is.

Within the #main-content div, there is the #left-nav and #middle divs which are floated left and I’ve specified max-widths and padding.

When the window is below a certain width I’ll remove the left nav with display:none, but until then I’d like the #main-content width to be fluid.

The left nav also needs to be a specific width to ensure the list items stay on one line.

Hope someone can help; it’s probably something simple, but just can’t make it to work..

Here’s the CSS:

.right-nav {
  padding:0 0 0 20px;
  margin:0;float:right;
  width:348px;
}
#main-content {
  border: 1px solid #e3e3e3;
  border-botom:0;
  box-shadow: 0px -1px 18px #e0e0e0;
  margin-top:-2px;
  position:relative;
  z-index:1;
  float:left;
  width:70.2%;
  background-color:#fff;
  height:100%;
  float:left;
  padding:30px 0 0;
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}
#left-nav {
  float:left;
  width:20.5%;
  padding:15px 0 5px 20px;
  background-color:#fff;
  color:#888;
  height:100%;
  margin:0;
}
#middle {
  width:72.3%;
  background-color:#fff;
  height:100%;
  float:left;
  margin:0 21px 5px;
}

error page: here

Answer 1

It’s to do with the margins on your #middle element. Your widths are percentages but your margins are absolute values.

To give you an example, when you reduce the screen size down so #main-content is 824px wide, you end up with;

#left-nav: 20.5% = 168.92px plus padding-left = 20px;

#middle: 72.3% = 595.72px plus margin = 42px (21px either side)

Total = 828px and therefore #middle has to drop down below #left-nav

So it’s a case of either reducing the percentages, making the margins percentages or adding a new @media screen style for those smaller widths.

*EDIT based on comments.

It’s the same thing going on again – you’re .right-nav element has a fixed width of 348px, the #main-content has a max-width of 67% but absolute padding of 20px either side;

So if the whole #content-wrapper has a width of 1069px you have;

.right-nav: 348px

#main-content = 716px; padding: 40px (20px left and 20px right).

Total = 1104px and the #main-content drops down. It’s the mix of relative(%s) and absolute(pixels) that’s causing the issues.