seanybravo
IS-IT--Management
Hello
I was wondering if some css guru would be able to offer me an explanation. I have two divs one nested inside the other. The width to both divs are set to 100%. But when I put padding on the internal one it becomes longer that the enclosing div and comes out of the right side. Why is this and what is the best solution to this.
Code:
<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Box test</title>
<style type="text/css">
<!--
body { margin: 40px;
}
#box {
width: 100%; color: #000; background-color: #CC9900; border: solid 1px #5E78C2; padding:0px 0px 0px 10px;
/*font: normal 0.8em/1.5 em arial, helvetica, sans-serif; margin:5px 0px 0px 0px;*/
}
#wrapper { width 100%; border:2px solid grey;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<form name="form1" method="post" action="">
<div id="Box" >
Hello im living in box!
</div>
</form>
</div>
</body>
</html>
I was wondering if some css guru would be able to offer me an explanation. I have two divs one nested inside the other. The width to both divs are set to 100%. But when I put padding on the internal one it becomes longer that the enclosing div and comes out of the right side. Why is this and what is the best solution to this.
Code:
<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Box test</title>
<style type="text/css">
<!--
body { margin: 40px;
}
#box {
width: 100%; color: #000; background-color: #CC9900; border: solid 1px #5E78C2; padding:0px 0px 0px 10px;
/*font: normal 0.8em/1.5 em arial, helvetica, sans-serif; margin:5px 0px 0px 0px;*/
}
#wrapper { width 100%; border:2px solid grey;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<form name="form1" method="post" action="">
<div id="Box" >
Hello im living in box!
</div>
</form>
</div>
</body>
</html>