I have a basic layout at the moment. http://dampflame.com/Sd3/ The problem is that little grey side bar on the left hand side. In IE 6 it freaks out, and only shows a height for the amount of text inside. I need it to stretch 100% at all times, it needs to be flush to the bottom, top, and side at all times. Please Help!
Replace your css with this one : @charset "utf-8"; /* CSS Document */ body { margin: 0; font-family: "Helvetica Neue", Helvetica, Verdana, sans-seif; font-size: 12px; background-color: #eee ; height:100%; } /* Header Objects */ .header { background-color: #333; height: 45px; width: 100%; padding-top: 0px; padding-right: 0px; padding-left: 0px; } .toolbar_container { height: 20px; position:relative; top: 12px; z-index:89; } .container_body { position: absolute; top: 47px; left: 3px; right: 0px; bottom: 0px; overflow: auto; padding-left: 220px; z-index:2; padding-right: 20px; } .side_bar { position: absolute; top: 46px; bottom: 0; left: 0; border-right: 1px solid #bcc2c7; width: 209px; background: #dfe1e3; z-index:3; height:100%; } Code (markup): Your css is pretty bad but I don't have too much time now to make a clean css for you.I've just modified your css and now works fine. I don't know why you use position absolute for all div's and why you use top, bottom etc when you have margin's and padding. Also to let you know when you want to set height 100% to a div the parrent div must have assigned a height value.
Excellent, I am trying to make it so that it dosent create a scroll bar on the page. It should all be flush with no scrolling.