CODEWITHSUNDEEP
htmlcsswidth
Mark O'Donoghue
Mark O'Donoghue

Reputation: 127

Div Width 100% not working when resizing of browser

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

Upvotes: 2

Views: 6132

Answers (2)

Mark O'Donoghue
Mark O'Donoghue

Reputation: 127

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

Upvotes: 4

PassKit
PassKit

Reputation: 12581

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.

Upvotes: 1

Related Questions