skeleton grid system: make container 100%

html css skeleton-css-boilerplate grid-system
Creativity Paralyze picture Creativity Paralyze · Mar 20, 2013 · Viewed 9.9k times · Source

is it possible to make the the root div (container) 100% of the document?
here's my code: 

<div class="container" style="width:100%;">
    <div id="topbar" class="sixteen columns" style="background-color:green;">topbar topbar topbar topbar topbar topbar </div>
</div>

thanks

Answer

samuelkobe picture samuelkobe · Aug 25, 2016

I know this question was asked ages ago but Skeleton has utility classes for this.

Basically add the .u-full-width and .u-max-full-width classes to any <div> with class .container.

Just make sure it's on the <div> element with class .container, as it doesn't seem to be meant for the <div> elements with .row or .column classes.

Related questions

Centering a div in Skeleton

For a project of mine, I'm using Skeleton Boilerplate for the first time. And I'm looking for the best practice of centring a div in Skeleton without bashing into the rules of Skeleton. At the moment, I've the following structure …

Read More
how to show grid lines with CSS?

I'm using getskeleton.com for a responsive website and I'm trying to show the grid lines in the background something like this http://nimb.ws/fTE2AR or http://fearonhay.com/residential/courtyard-house . What would be the best way to …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More