How can I fill the bottom and right background spaces?


#1

There is always background space, which is colored tan, at the bottom and far right of my page. I must have all background space covered with my div's while keeping their original dimensions and general positions except for "middle".

I attempt to fill the right space, by extending the width or right margin (with a more negative value) of my right div. Either nothing happens, or the div moves down. I try to fill the bottom space by extending the footer height or margin-bottom (with a more negative value). Either nothing happens, or the footer grows while pushing the space further down.


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>The Resume of </title>
	</head>	
	<body>
	<div id="header"></div>
	<div class="left"></div>
	<div id="middle"></div>
	<div class="right"></div>
	<div id="footer"></div>
	</body>	
</html>

body{background:tan;}
#header{position:fixed;
    height:75px;
    width:100%;
    background-color:grey;
    margin:-8px -8px 0px -8px;
    z-index:1;}
.left{display:inline-block;
    float:left;
    height:600px;
    width:15px;
    background-color:teal;
    margin:50px 0px 0px -8px;}
#middle{display:inline-block;
    float:left;
    background-color:lightblue;
    height:600px;
    width:98%;
    margin:50px 0px 0px 0px;}
.right{display:inline-block;
    float:left;
    height:600px;
    width:15px;
    background-color:teal;
    margin:50px 0px 0px 0px;}
#footer{height:75px;
    background-color:grey;
    clear:both;
    margin:-4px -8px 0px -8px;}

#2

i would just throw out most of the margins, the display: inline-block, which would result in something like this, now, why do you have .left and .right? they seem very small