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.

Code:

<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/tut...raladvice.html

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

Thread: Padding issue

Thread Tools

Padding issue

Similar Threads

Having problems with a footer - can someone help?

Posting Permissions