I need help with a setup where I want a div to fill 100% of the screen with a margin of 10px. Inside this div, there should be a navigation pane at the top, followed by a content div below with padding, and an inner content dive also with padding. The issue I'm facing is that setting the height to 100% plus adding margin/padding stretches the div beyond what I want. I've tried using absolute positioning, but it messes up the layout of other divs and makes resizing non-fluid. Is there a CSS solution to achieve this without resorting to JavaScript?
Below is the code snippet:
ASPX
<!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>
<title>Untitled Page</title>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
</div>
<div id="content">
<div id="inner">
</div>
</div>
</div>
</body>
</html>
CSS
html, body
{
height:100%;
width:100%;
margin:0px;
padding:0px;
background-color:Black;
}
#wrapper
{
height:100%;
margin:10px;
background-color:Blue;
}
#navigation
{
height:100px;
background-color:Green;
}
#content
{
height:100%;
padding:10px;
background-color:Orange;
}
#inner
{
height:100%;
width:100%;
padding:5px;
background-color:Lime;
}