systemonster
New Member
I was wondering, if I wanted the purple colour of the header and the blue colour of the footer to extend 100% across the page, but keep the content in the middle aligned with the orange in the middle, how should I be achieving it?Do I have to be adding extra 100% divs around the header and footer and colouring in them? It seems like a crap way of doing it.This is the code I'm working from:http://jsfiddle.net/HMsKa/21/HTML\[code\]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en-US"><head> <title>Title</title> <link href="http://stackoverflow.com/static/css/main.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header" class="thin_width" > <a href="http://stackoverflow.com/"><img src="http://stackoverflow.com/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a> <ul> <li><a href="http://stackoverflow.com/posts/list/">Link1</a></li> <li><a href="http://stackoverflow.com/posts/create/">Link 2</a></li> <li><a href="http://stackoverflow.com/about">Link 3</a></li> </ul> </div> <div id="content" class="thin_width"> <h1>Sed ut perspiciatis unde</h1> <form id="searchForm" action="/search"> <input type="text" name="kw" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Keyword"> <input type="text" name="loc" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Location"> <input type="submit" class="button r2 b1 ts3" id="button_search" value="http://stackoverflow.com/questions/12822255/Search"> </form> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> </div> <div id="footer" class="thin_width"> © 2012 Company, Inc. <ul> <li><a href="http://stackoverflow.com/contact">Contact</a></li> <li><a href="http://stackoverflow.com/faq">FAQ</a></li> <li><a href="http://stackoverflow.com/terms">Terms</a></li> <li><a href="http://stackoverflow.com/privacy">Privacy</a></li> </ul> </div> </div> </body></html>\[/code\]CSS\[code\]/* GENERAL */html { height:100%; }body { height:100%; font-family: Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; font-size:100%; }p { font size: 13px; margin: 10px 0; padding: 0; }h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 14px; } blockquote { font-style: italic; }.thin_width { width: 600px; }#container { min-height: 100%; position: relative; background-color: red;width: 600px;margin: 0 auto;}#content {padding-bottom: 80px; background-color: orange;}#footer { position:absolute; bottom: 0; clear: both; float:left; height:60px; background-color: blue;}#footer li { display:inline; }#header {background-color: purple;}\[/code\]