Widening in Minima- Week 1

In case you haven't noticed, Minima is just a little bit on the skinny side. It must have been the fad back in 06. We've came a long way, baby!

So here's the code Minima uses. From your Edit HTML page, search for (ctrl+f)  "#outer-wrapper".

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

You'll need to changed the widths, so here's what will be changed:

#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 740px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 250px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Let's give a breakdown on what each of these codes mean:

   #outer wrapper:  It is the main area that holds both your posting area and sidebar area. It does not include the background area.
   #main wrapper: That is the area where your posts appear.
   #sidebar wrapper: your sidebar! of course! :)

And that's it! Experiment with different sizes!
Having problems? Email us at writethegeeks@hotmail.com!