full width header/footer

[slaggsten]

hey everyone! :)

i’m trying to make my header and footer width 100% and centered. Everything looks fine until the browser size becomes to small, and a horizontal scroll bar appears. Help me!

Anton.stallbacka.com

[pixelgrid]

adding overflow-x:hidden; to your body could solve the scrollbar issue

[slaggsten]

thanks mate!

[TheDoc]

You’ll want to do this: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

The reason why it’s showing a scrollbar is because you have a div (.hfeed.site) that has a width of 100% AND padding which takes it over 100%. That’s where `box-sizing: border-box;` saves the day.

[slaggsten]

i have another issue with the text, when i make the browser really small the text-rows increases, why? how can i fix it? doesn’t matter that the text is outside the visible area

[slaggsten]

Thanks doc! thats what i was suspecting, but just making the body overflow:hidden worked out great :-)

[Author]

Posts