Hey guys, noobie here trying to create a simple layout. what i want to achieve is to get my footer over the whole lenght of the screen. the way i tried it the footer will not be wider as the main container is. what am i doing wrong here ? ps. i *do* need that one div above the footer here the code any help would be greatly appreciated <html> <head> <title>title</title> <style type="text/css"> body{ margin: 0; } div#main_container{ margin: 0 auto 0 auto; width: 1200px; text-align: left; } div#box1{ background-color: black; width: 100%; height: 88px; } div#box2{ background-color: red; float: left; width: 200px; height: 300px; } div#box3{ background-color: green; float: left; width: 800px; height: 300px; } div#box4{ background-color: silver; float: left; width: 200px; height: 300px; } div#box5{ background-color: purple; clear: left; float: right; width: 100%; height: 90px; } div#box6{ background-color: silver; clear: both; float: left; width: 100%; height: 90px; } </style> </head> <body> <div id="main_container"> <div id="box1">box 1</div> <div id="box2">box 2</div> <div id="box3">box 3</div> <div id="box4">box 4</div> <div id="box5">box 5</div> <div id="box6">box 6</div> </div> </body> </html>