How can I get rid of the extra space at the bottom of my page?

Attached is a screen shot of a page I'm working on and the CSS and HTML are below.

Where you see the arrow pointing to the lower right hand corner of the page - I want to get rid of that space and I don't know how. Ultimately, I want 100% of the height of the screen to be just that and not 100% plus a mystery supplement that I can't account for.

Where is that extra space coming from and how can I get rid of it?

Here's my CSS:

html, body {
height:100%;
width:100%;
margin:0px;
font-family:Arial;
size:11pt;
color:#000000;
}

 #header {
width:100%;
height:109px;
position:absolute;
background-image:url(../images/background.png);
background-repeat:repeat-x;
 }
 
#header_image {
width:1199px;
height:109px;
position:relative;
background-image:url(../images/header.png);
 }
 
 #side_nav {
position:relative;
float:left;
width:190px;
height:100%;
padding-left:10px;
background-image:url(../images/sidebar_background.jpg);
background-repeat:repeat-y
 }
  
 #mainContent {
width:1000px;
height:100%;
position:relative;
margin-left:200px;
 }
 
 #footer {
 width:100%;
 height: 35px;
 background-color:#000000;
 }


 a.side_nav {
color:#000000;
font-size:10pt;
text-decoration:none;
} 

 a.side_nav:hover {
color:#000000;
font-size:10pt;
text-decoration:underline;
} 

 a.side_nav:visited {
color:#000000;
font-weight:bold;
font-size:10pt;
text-decoration:none;
} 

Open in new window


..and here's my HTML:

<!DOCTYPE html>
		<html lang="en">
		<head>
		<title>dashboard</title>
		<link href="styles/style.css" rel="stylesheet" type="text/css" />
		<meta http-equiv="X-UA-Compatible" content="IE=100" /><meta name="viewport" content="width=device-width" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="-1" /><meta charset="utf-8" />
		</head>
		<body>
			<div id="header"></div>
			<div id="header_image"></div>
				<div id="side_nav">
					<br><a href="home.php" class="side_nav">home</a>
				</div>
			<div id="mainContent">
		<br><b>home</b><br><br>This is the beginning of my tool...
			</div> <!-- close mainContent -->

			</body>
		</html>

Open in new window


What do you think?
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

brucegustPHP DeveloperAuthor Commented:
Here's the screenshot...
screenshot.png
0
meb_santosoCommented:
remove height:100%; from the html, body {} (line 2 of your CSS)

see: http://jsfiddle.net/kpuy00nw/
0
brucegustPHP DeveloperAuthor Commented:
Meb, when I do that, I get this:

screenshot
In other words, when I eliminate the 100% dynamic from my html / body tag, my sidebar quits right after the "home" menu option.

Is there a way to get my content and my menu to occupy the entire page AND still have the overall result not bleed over into an additional 120 pixels?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

meb_santosoCommented:
I think you can read this and apply the same approach: http://alistapart.com/article/fauxcolumns (i.e. use a background image to "fill" the body and thus creating a visual separation between your sidebar and content area.)
0
brucegustPHP DeveloperAuthor Commented:
Meb!

We're there except for one thing...

I've got my footer running along the bottom, but I can't get the "internal" divs to extend to the bottom of the page. Anytime I try to change something from min-height to height, I lose my effect with the footer.

So...

What can I do to get my background image on my sidebar menu to run down the length of the page instead of stopping short like it is in the attached screenshot?

What do you think?
almost-there.png
0
brucegustPHP DeveloperAuthor Commented:
Here's my CSS:

html, body {
width:100%;
height:100%;
margin:0px;
font-family:Arial;
size:11pt;
color:#000000;
background-color:#ffffff;
}

#wrap {
min-height:100%;
}

 #header {
width:100%;
height:109px;
position:absolute;
background-image:url(../images/background.png);
background-repeat:repeat-x;
 }
 
#header_image {
width:1199px;
height:109px;
position:relative;
background-image:url(../images/header.png);
 }
 
 #side_nav {
position:relative;
float:left;
width:190px;
height:100%;
padding-left:10px;
padding-bottom:35px;
background-image:url(../images/sidebar_background.jpg);
background-repeat:repeat-y;
 }
  
 #mainContent {
width:1000px;
min-height:100%;
position:relative;
overflow:auto;
background-color:#cccccc;
margin-left:200px;
padding-bottom:35px;
 }
 
 #footer {
 width:100%;
 height: 35px;
 margin-top:-35px;
 background-color:#000000;
 }


 a.side_nav {
color:#000000;
font-size:10pt;
text-decoration:none;
} 

 a.side_nav:hover {
color:#000000;
font-size:10pt;
text-decoration:underline;
} 

 a.side_nav:visited {
color:#000000;
font-weight:bold;
font-size:10pt;
text-decoration:none;
} 

Open in new window


Here's my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>dashboard</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=100" /><meta name="viewport" content="width=device-width" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="-1" /><meta charset="utf-8" />
</head>
<body>
	<div id="wrap">
		<div id="header"></div>
		<div id="header_image"></div>
			<div id="side_nav">
				<br><a href="home.php" class="side_nav">home</a>
			</div>
			<div id="mainContent">
			<br><b>home</b><br><br>This is the beginning of my tool...
			</div> <!-- close mainContent -->
	</div>
	<div id="footer"></div>
</body>
</html>

Open in new window

0
meb_santosoCommented:
Try this:
Move these lines: (line 37-38)

background-image:url(../images/sidebar_background.jpg);
background-repeat:repeat-y;

to the html {} part.

Meaning: draw the sidebar background image and repeat it vertically anyways, disregard any body length,
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brucegustPHP DeveloperAuthor Commented:
Meb!

You, sir, are a genius!

I have googled this up and down and was repeatedly coming up with counsel that basically said you're obligated to conform to the dimensions of your parent div, hence what I was attempting was looking pretty impossible.

Never thought to make the side bar part of the html div! Look at that! Works great!

Thanks so much!
0
meb_santosoCommented:
I don't know about being a genius, but many thanks for the points :-)

It is actually a very old technique, originating from <html background="image.jpg">, etc...

It has been years that i don't use this kind of method since the design world evolved oh so quickly.

Should you have build a page with more content, i would suggest that you go back to your original css scenario and use fluid instead of fixed widths and heights. You'll get my point eventually :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.