Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Prevent horizontal scroll bars on page container

Prevent horizontal scroll bars on page container

Problem

I'm using a 960px fixed Width container for my site.

However, I'd like to add a wrapper that adds a box shadow to the page and increased the size of the left/right margins.

You can see the desired effect at http://jsfiddle.net/2QqxB/5/embedded/result/.

The problem is that at 1024 x 768 I get a Horizontal Scroll Bar as the wrapper is 1020px.

So how can I achieve the same effect, without using a background image and without a horizontal scroll bar.

Code (also at http://jsfiddle.net/2QqxB/5/):

HTML:

Lorem ipsum dolor sit amet...

CSS:

html, body {
 height: 100%;   
}

body {
 background-color: #f3a450;   
}

#wrap {
 width: 1020px;
 box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.4);
 margin: 0 auto;
 min-height: 100%;
 background-color: #fff;
}

#container {
 width: 960px;
 margin: 0 auto;
}
Problem courtesy of: Ben Foster

Solution

You can make it work by using normal/min/max width on #wrap:

  • min-width must be 960px because the internal content is that wide
  • max-width must be 1020px because it is the default width of the white area
  • width is set to 100% to always touch the edge of the window

See example: http://jsfiddle.net/2QqxB/7/

#wrap {
  max-width: 1020px;
  min-width: 960px;
      width: 100%;
}

#container {
  width: 960px;
}
Solution courtesy of: biziclop

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Prevent horizontal scroll bars on page container

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×