No 100% width with Modernize?

[magnus_vb]

Hi,
If I use the Modernizr full version (modernizr-2.6.2.min.js) the header and navbar will not fill the full width – but when using a custom built Modernizr the 100% width works.

With the full version it looks like header and navbar using the “max-width: 1140px” in the rule “.main” ??

I have scratch my head many times now about this, but can’t solve it – so any suggestion is welcome.

The header and navbar should be 100% width, and using this scss:

header {
@include changeform;
background-color: darken($header, 10);
background-image: url(/img/wild_oliva.png);
text-align: center;
padding: 0.5em 0 0.5em 1em;
@include breakpoint(small) {
text-align: left;
}
}

.wrapper {
margin: 0 auto;
}

.main {
max-width: 1140px;
margin: 0 auto;
padding: 0 1em 0 1em;
@include breakpoint(large) {
padding: 1.5em;
margin: 0 auto;
}
}

On this page I’m using the full version of Modernizr: [http://cigar2.se](http://cigar2.se “no full width”)

And here I’m using a custom build: [http://cigar2.se/skytteguiden.html](http://cigar2.se/skytteguiden.html “yes, full width”)

What it is in Modernizr that limit the width on .wrapper to the same as in .main rule? With the custom build the design breaks in IE8 :(

Regards, Magnus

[strages]

Hey I dont know if this is the right solution, but it works as far as i can see.

put on all the elements from header up to html (so only parents, and the parents from the parents up to html itself), a width:100%; then it will work.

gl

[magnus_vb]

Thanks strages,
setting width to 100% on the html element, seems to solve the issue. Strange, but working… ;)

Magnus

[strages]

nice that I could help! :)

[Author]

Posts