travisdoerr
27 Oct 2006, 04:53 PM
Why does firefox made padding expand the width of a div, instead of pushing the text area in? Explorer doesn't alter the width, only the area that text and other elements appear. Can anyone help me figure out how to make it display similarly in firefox AND explorer?
Here is an example, check it out in both browsers.
<html>
<head>
<title>test</title>
<style type="text/css">
#shell {
margin:0px;
padding:0px;
border:1px solid black;
width: 200px; }
#left {
margin:0px;
padding:10px;
width:100px;
float:left;
background-color:red; }
#right {
margin:0px;
padding:10px;
width:100px;
float:left;
background-color:blue; }
</style>
</head>
<body>
<div id="shell">
<div id="left">hello</div>
<div id="right">world</div>
</div>
</body>
</html>
Here is an example, check it out in both browsers.
<html>
<head>
<title>test</title>
<style type="text/css">
#shell {
margin:0px;
padding:0px;
border:1px solid black;
width: 200px; }
#left {
margin:0px;
padding:10px;
width:100px;
float:left;
background-color:red; }
#right {
margin:0px;
padding:10px;
width:100px;
float:left;
background-color:blue; }
</style>
</head>
<body>
<div id="shell">
<div id="left">hello</div>
<div id="right">world</div>
</div>
</body>
</html>