Autoexpanding CSS Cols to fit screen

Back in the day it was easy to create a layout with tables that autostretched depending upon screen size.  WIth CSS it seems a bit more tricky.

I have attached a HTML file with CSS as an example of what I am trying to do.  I need the file to stretch out the 3 divs 100% of user screen size.  However, the header and right col hav specified px values that have to stay.  I also do not want scroll bars to appear on the page like you used to be able to do with Tables.

How do I autostretch the left nav link layer to 100% of the remaining page height?  How do I stretch the content layer to 100% of remainign page hieght and width?  Will this code work in all standard CSS supporting browsers and screen sizes?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html {
	height: 100%;
	margin: 0px;
	padding: 0px;
}
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}
#Header {
	width: 100%;
	height: 100px;
	background-color: #006633;
	color: #FFFFFF;
}
#SideLinks {
	width: 150px;
	height: 400px;
	background-color:#003399;
	color: #FFFFFF;
	float: left;
}
#Content {
	width: 400px;
	height: 400px;
	margin: 10px;
	padding: 2px;
	border: solid 2px #333333;
	float: right;
}
-->
</style>
</head>
 
<body>
<div id="Header">Header Height: 100px Width: 100% </div>
<div id="SideLinks">
  <p>Sidelinks</p>
  <p>Width: 150px</p>
  <p>Height: ?? How do I set the height so it automatically fills 90% or 100% or whatever the rest of the height is to touch the bottom of the screen without scrolling??? </p>
</div>
<div id="Content">
  <p>Content</p>
  <p>Width: ??? How do I set the width so that this box stretches accross what is left of the screen? It has margins and borders.</p>
  <p>Height: ??? Same question. Want it to fill the space that is remaining hith.  </p>
</div>
</body>
</html>

Open in new window

hoyaabanksAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

David S.Commented:
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
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.