The following lines were added (+) and removed (-):
One place to put global CSS is in the HTML head after the <nowiki><title></title> and before the </head></nowiki>. For elements to fill a page, the body of the page has to be the full browser height. To make a vertical element that fills the page, first make the page fill the browser <body> html { height: 100%; } body { margin: 0; padding: 0; height: 100%; } #content { background: #D00; border-left: 1px solid #000; border-right: 1px solid #000; padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana, sans-serif; width: 960px; min-height: 100%; }Make sure you use #content div "min-height: 100%" instead of "height: 100%" so that if the content of the #content div extends beyond the height of the window, the background will expand as well.If searching online for more information on this type of stretching use the terms [http://speckyboy.com/2010/05/30/liquid-fluid-and-elastic-layout-templates-tools-and-frameworks/ Liquid, Fluid and Elastic]. Those are key terms often used in this type of CSS discussion.== Faux Columns ==By default CSS elements only stretch vertically as far as they need to so that if an image that is only 150 pixel tall is in the <div> tags the full element will only stretch that far. It can be a problem when trying to create a layout with two equally tall columns with different background colors. The ugly cheat is to use a tiled background image. <nowiki>background: #ccc url(../images/backgroundcolor.gif) repeat-y 50% 0;</nowiki>== Flexbox ==A new CSS module for layout. <nowiki>.container {</nowiki> display: -webkit-flex; display: flex; } nav { width: 200px; } .flex-column { -webkit-flex: 1; flex: 1; <nowiki>}</nowiki>See: [http://www.sketchingwithcss.com/flexbox-tutorial/ Flexbox Tutorial]The problem with Flexbox is that they keep changing the standard so you cant count on the same results from one browser to the next.