5

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

Creativity Paralyze
  • 257
  • 4
  • 12
  • `div` always is 100% (if not overrided). – Behnam Esmaili Mar 20 '13 at 19:52
  • Can you please clarify what you want the final product to look like? Or what it looks like now? – brbcoding Mar 20 '13 at 19:56
  • 1
    He's using a responsive platform called Skeleton. He's trying to override the container class that is provided with Skeleton to have a a full browser width container instead of one that is limited to 1140px. He needs to define his own styles to do this rather than overriding what already exists. – Michael Mar 20 '13 at 19:58

2 Answers2

16

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.

samuelkobe
  • 501
  • 4
  • 16
  • 1
    My version of Skeleton seems to be too old to have `.u-full-width`. Fortunately, it looks like the CSS for it is quite simple: `.u-full-width { width: 100%; box-sizing: border-box; }` – rinogo Sep 25 '17 at 22:47
5

You'll need to create your own container class. I don't know what the css for the skeleton responsive platform looks like off the top of my head. I use one called Columnal, I know it is similar, so it should be something like this...

.full-width-container {
width: 100%;
max-width: 100%;
clear: both;
margin: 0 auto;
}

The normal css should be something like .container { max-width: 1140px; width: 100%; clear: both; margin: 0 auto; }

Michael
  • 6,591
  • 2
  • 23
  • 39