调整浏览器大小时，div宽度100％不起作用

Question

Basically, my 100% width Div wrappers aren't working right when I re-size the browser. When you re-size the browser smaller than what the page design is, I get a horizontal scroll bar and it's not actually spanning full width. It's like it's just cutting off at some point.

Here is the link : Website Link

I've tried to fix this but it's just really confusing me why this is happening. Can anyone shed some light on this problem?

Thanks in advance.

Mark

Answer 1

I figured it out! I set width: 100% to min-width: 100% and that fixes the issues.

Answer 2

Your .wrap div has a fixed width of 1050px which is forcing the minimum width of the page to also be 1050px. This is why you are seeing scrollbars when the browser window is less than 1050px wide.

.wrap {
  position: relative;
  margin: 0 auto;
  width: 1050px;
}

However, there is a reason why this width is fixed, because the margin:0 auto; requires a fixed width div in order to centre the content.

If you would like your design to scale down for narrower screens, then I suggest that you look at using CSS Media Queries to create alternative rules for different browser/device widths.

Try resising this demo to see if it does what you want, and if so, work through the tutorial .

Smashing Magazine also has a good media queries tutorial, especially if you are looking for alternative layouts for mobile devices.