Can't prevent nested Div from overflowing when using percentage sizes and padding in CSS?
I want to be able to link nested divs with these properties:
-
width: 100%
-
height: 100%
-
padding: 10px
I want it to be such that the children are 100% of the width and height of the remaining space after filling, not before. Otherwise, when I have a document like the example below, the child creates scrollbars. But scrollbars are not the main issue, but the fact that the child extends beyond the width of the parent container.
I can use all the declarations position: absolute
, but it seems to be wrong. 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 do this using position:relative
or position:static
, and percentages, percentages sizing children according to parent's width / height minus padding and margins? Should I resort to position:absolute
both left / right / top / bottom?
Thanks for your help, Spear
a source to share
I want it to be such that children are 100% of the width and height of the remaining space after filling, not before.
A brilliant futuristic way to do it:
#something {
width: 100%; height: 100%; padding: 10px;
box-sizing: border-box; -moz-box-sizing: border-boz; -webkit-box-sizing: border-box;
}
However, this will not work in IE prior to version 8.
Should I resort to position: absolute and left / right / top / bottom?
In another way, but "positioning along the edges" (positioning top
and bottom
, but not in the height
same way for left
/ right
/ width
) will not work in IE before version 7.
the scrollbars are not the main issue, the fact that the child is stretched beyond the width of the parent container.
This is not a problem horizontally. Leave it width
at the default auto
and it will get the full width of its parent minus the paddings. The only problem is you are not getting this behavior with height
.
Hybrid approach: auto
- width
, 100%
height with box-sizing
and add some hacked JS that only works in IE6-7 to fix the height there?
a source to share