Can't Prevent Nested Div's from Overflowing when using Percent Sizes and Padding in CSS?
- by viatropos
I want to be able to layout nested divs with these properties:
width: 100%
height: 100%
padding: 10px
I want it to be such that, the children are 100% width and height of the remaining space after padding is calculated, not before. Otherwise, when I have a document like the below example, the child makes the scrollbars appear. But the scrollbars are not the main issue, the fact that the child stretches beyond the width of the parent container is.
I can use all position: absolute declarations, but that doesn't seem right. Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>Liquid Layout</title>
<style>
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
background-color:black;
}
#container {
position:relative;
width:100%;
height:100%;
background-color:red;
opacity:0.7;
}
#child1 {
position:relative;
width:100%;
height:100%;
padding:10px;
background-color:blue;
}
#nested1 {
position:relative;
background-color: white;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="child1">
<div id="nested1"></div>
</div>
</div>
</body>
</html>
How do I make it so, using position:relative or position:static, and percent sizes, the percents size the children according to the parent's width/height minus padding and margins? Do I have to resort to position:absolute and left/right/top/bottom?
Thanks for the help,
Lance
