Dizzydan02
New Member
I am trying to have a layout that has a section where the left column is fixed width and 100% height and the right column is 100% width and height. I also want the footer to be sticky to the bottom. The problem I am running into is that since the columns are 100% the height of the browser view below the header, they are running behind the banner and footer divs. I would like them to stop at the banner. Was is the best way to style these divs to achieve this?Any help is appreciated and sorry if this question was asked somewhere else, I couldn't find the same problem I am facing.CSS and HTML are below:\[code\]@charset "UTF-8";/* CSS Document */html, body{ width: 100%; height: 100%; overflow: hidden;}body{ margin: 0;}/*----- HEADER -----*/#header{ width: 100%; height: 50px; background: linear-gradient(to bottom, #BBBBBB 0%, #CCCCCC 100%) repeat scroll 0 0 #455774; border-bottom: 1px solid #666666; box-shadow: 0 2px 2px #666666;}/*----- END HEADER -----*//*----- SEARCH -----*/#searchBox{ width: 100%; height: 50px; background: #EEEEEE; border-top: 1px solid #FFFFFF;}/*----- END SEARCH -----*//*----- APP SECTION -----*/#appView{ width: 100%; background: white;} #leftPane, #rightPane { height: 100%; position: absolute; } #leftPane { float: left; width: 270px; background: #FFFFFF; border-right: 20px solid #EEEEEE; } #leftPaneNav { background-color: #666666; float: left; height: 100%; width: 50px; } #sidebar { float: left; height: 100%; left: 50px; margin: 0; padding: 0; position: absolute; right: 0; background: #red; box-shadow: 0px -5px 5px 0px rgb(136, 136, 136) inset; } #rightPane { width: 100%; left: 290px; background: #FFFFFF; box-shadow: 2px 2px 5px 2px rgb(136, 136, 136) inset; }/*----- END APP SECTION -----*//*----- BANNER DIV -----*/#banner{ position: absolute; bottom: 50px; width: 100%; height: 50px; background: red;}/*----- FOOTER -----*/ #footer{ position: absolute; bottom: 0; width: 100%; height: 50px; background: black;}HTML<body><div id="header"></div><div id="searchBox"></div><div id="appView"> <div id="leftPane"> <div id="leftPaneNav"> </div> <div id="sidebar"> </div> </div> <div id="rightPane"> </div></div><div id="banner"></div><div id="footer"></div></body></html>\[/code\]