PDA

View Full Version : Padding issue



travisdoerr
27 Oct 2006, 03: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>

Wickham
28 Oct 2006, 04:25 AM
The answer is that IE in quirks mode includes padding within a div box but outside the box when not in quirks mode and it then works like Firefox.

Add a Doctype right at the top of your html file before the <html> tag.
Read the second paragraph here:-
http://www.wickham43.supanet.com/tutorial/generaladvice.html

Quirks mode is out of date for the reason you have found.