Hi I am making a layout with a header on top, a left and right column in the middle and a footer at the bottom. However, I am up to the middle part where the left and right column is and when I resize the window the right column doesn't resize correctly along with the other divs. and at some point I get a horizontal scroll bar, however I need to be exactly the same at an 800x600 minimum. Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head id="Head1" > <title>Untitled Page</title> <style type="text/css"> html, body, form{height: 100%; width: 100%; padding: 0; margin: 0; background-color: green;} #header{width: 100%; height: 50px; background-color: red;} ul{list-style: none; display: inline; padding: 0; margin: 0; float: right;} #left{float: left; width: 200px; height: 85%; background-color: yellow; padding-right: 84.2%;} #float-wrap{width: 100%; height: 100%;} #right{width: 84.2%; background-color: Gray; height: 85%; padding: 0; margin: 0; float: left; margin-left: -84.2%;} #right p{padding: 0; margin: 0;} </style> </head> <body> <form id="form1"> <div id="header"> <ul><li>asasd</li><li>asdasd</li></ul> </div> <div id="float-wrap"> <div id="left"> asdasdads adadsds </div> <div id="right"> <p>dadsads asdasddas asdasdasd</p> </div> </div> </form> </body> </html>