The problem I am having is that I want my navigation and content div's to be 100% of the browser height, but it keeps going 175px further than 100% because of my header. I have been searching for quite some time for a solution, but no luck. If anyone has any advice, I'd appreciate it.
Here is the CSS:
@charset "utf-8"; /* Great Harvest Bread CSS */ body { font-family:Georgia, "Times New Roman", Times, serif; font-size: 12pt; color: #764200; text-align: left; height: 100%; margin:0px; padding:0px; border-left:0px; border-right:0px; } html { height:100%; } #wrapper { height: 100%; } #banner { position:absolute; width:1024px; left:0px; top:0px; height: 175px; background-image:url('../images/banner.background.wheat.png'); } #leftcontent { position: absolute; left:0px; top:175px; width:232px; padding-left: 20px; padding-right: 20px; padding-top: 20px; background-color:#764200; height: 100%; overflow: auto; margin-bottom: -175px; } #rightcontent { position:absolute; width:712px; left:272px; top:175px; padding-left: 20px; padding-right: 20px; padding-top: 20px; background-color:#FEDB96; height: 100%; overflow: auto; margin-bottom: -175px; } }
Here is the HTML:
<div id="wrapper"> <div id="banner"><img src="images/banner.logo.png" alt="Great Harvest Bread Logo" width="891" height="175" hspace="53" /></div> <div id="leftcontent"> <jsp:include page="navigation.jsp" /> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="rightcontent"> <p></p> <h2>Home</h2> Content goes here <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div>
can you please provide a
can you please provide a link or all your HTML from the doctype to the ?
Also, I doubt you need absolute positioning, maybe an image of what you are trying to do?
Thanks!
Here is all of the
Here is all of the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ page import="java.sql.*, java.lang.*" %> <html> <head> <title>GreatHarvest</title> <link href="styles/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="banner"><img src="images/banner.logo.png" alt="Great Harvest Bread Logo" width="891" height="175" hspace="53" /></div> <div id="leftcontent"> <jsp:include page="navigation.jsp" /> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="rightcontent"> <p></p> <h2>Home</h2> <p>stuff goes here</p> </div> </div> </body> </html>
I am not entirely sure what the positioning does tbh, I will read up on that more.
The page layout is like this:
|----Header-Image----|
|Nav|-----Content----|
I want my Navigation and Content to have a 100% height (go to the very bottom of the browser window). I have this working, *but*, it is going 100% + 175px because of the header div at the top. I just want it to fill the browser window, not go 100% and account for the header image. I tried putting everything in a wrapper div, but that didn't seem to work.
Thanks!
Did you manage to fix this?
I am having the same issue as this.
Heres my HTML:
<!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>How To</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div id="topHeader"> </div> <!-- start header --> <div id="logo"> </div> <div id="header"> <div id="menu"> </div> </div> <!-- end header --> <!-- start page --> <div id="page"> <!-- start content --> <div id="content"> <p>tes</p> <p> </p> <p> </p> <p> </p> <p>t </p> </div> <!-- end content --> <!-- start sidebar --> <div id="sidebar"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <!-- end sidebar --> <div style="clear: both;"> </div> </div> <div class="push"></div> </div> <!-- end page --> <!-- start footer --> <div class="footer"> </div> <!-- end footer --> </body> </html>
And the CSS
html, body { height: 100%; margin: 0; padding: 0; } body { background: #0BA1DE; font-size: 14px; font-family: Georgia, "Times New Roman", Times, serif; text-align: justify; color: #FFFFFF; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto; /* position:relative;*/ } .footer { height:60px; /* Height of the footer */ background:#0F0; margin: 0 auto; position:absolute; bottom:0; width:100%; } .push { height: 4em; } /* Header */ #header { width: 960px; margin: 0 auto; height: 60px; } #topHeader { margin: 0; padding: 0; background:#0F0; height:20px; } /* Menu */ #menu { float: left; width: 960px; height: 60px; background:#0FF; font-family: Arial, Helvetica, sans-serif; } /** LOGO */ #logo { width: 960px; height: 80px; margin: 0 auto; background:#FFF } /* Page */ #page { width: 960px; background: #000; height:100%; left:0; right:0; margin-left:auto; margin-right:auto; position:absolute } #content { float: left; width: 660px; background:#FFF; height:100%; } #sidebar { float: right; width: 300px; margin: 0; padding: 0; background:#0CF; /*height:100%;*/ }