Why is this padding expanding my div?

**mwarren** · 08-07-2007, 01:25 PM

First of all, here's my code. It validates and all that jazz:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<link href="style.css" rel="Stylesheet" type="text/css" />
	<title>CSS Test</title>
</head>
    <body>
		<div id="menu">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu</div>
		<div id="wrapper">
			<div id="tree">tree</div>
			<div id="input">input</div>
			<div id="description">description</div>
		</div>
    </body>
</html>

Code:

* {
	margin: 0;
	padding: 0;
}

#wrapper {
	width: 100%;
	height: 100%;
	z-index: 0;
	position: absolute;
	top: 0px;
	right: 0px;
}

#menu {
	width: 100%;
	height: 100px;
	background-color: #ffff00;
	border: 0px;
	z-index: 1;
	position: absolute;
}

#tree {
	float:left;
	width: 30%;
	height: 100%;
	background-color: #008000;
	border: 0px;
	z-index: 0;
	position: absolute;
	padding-top: 100px;
	top: 0px;
	left: 0px;
}

#input {
	width: 70%;
	height: 70%;
	float: right;
	background-color: #ffa500;
	overflow: auto;
	border: 0px;
	z-index: 0;
	padding-top: 100px;
}

#description {
	width: 70%;
	height: 30%;
	float: right;
	background-color: #add8e6;
	overflow: auto;
	border: 0px;
	z-index: 0;
}

The goal here is to have a fixed height menu at the top of the page, and everything else be percentages and no scrolling in the window. That part works fine, and I did it with z-indexes. The problem, though, is that the padding-top in the menu and input divs to make their content visible below the menu makes the div bigger instead of just pushing the content down. This forces the user to have to scroll, and I don't want that. What should I do?

**jscheuer1** · 08-07-2007, 03:36 PM

Generally, that's what padding does. It adds to the physical dimension of the element. Since you are already using so much absolute positioning (something that generally makes it hard to design a flexible page, once actual content is added) you can just set the wrapper overflow to hidden:

Code:

#wrapper {
	width: 100%;
	height: 100%;
	z-index: 0;
	position: absolute;
	top: 0px;
	right: 0px;
	overflow:hidden;
}

But I would recommend a complete redesign that doesn't use absolute positioning.

**Twey** · 08-07-2007, 04:20 PM

The absolute positioning is used correctly in this case, but I'd suggest using ems rather than pixels. As it stands, that menu is going to look awfully odd if the user's font doesn't fit inside it.

**jscheuer1** · 08-07-2007, 05:49 PM

Originally Posted by Twey

The absolute positioning is used correctly . . .

Perhaps, but not wisely. I never said there was anything invalid about it. It will make it difficult to load the normal sorts of content one often finds on pages into the design and have them displayed well under the variety of user end conditions/agents that exist on the web. If the design has a specialized use (such as limited amount of text only presentation), it may be appropriate.

Any position property other than the default (static) should be used sparingly. Otherwise you get a rigid design that cannot adapt to varying conditions. It also can make it difficult to use positioning where it is the most beneficial - for special effects, and situations that may arise.

**alexjewell** · 08-08-2007, 02:42 AM

The simple solution to stopping the div from getting bigger is by putting a div inside of it with a margin:

Code:

#tree {
	float:left;
	width: 30&#37;;
	height: 100%;
	background-color: #008000;
	border: 0px;
	z-index: 0;
	position: absolute;
	top: 0px;
	left: 0px;
}

#tree_inside{
margin-top: 100px;}

HTML Code:

<div id="tree">
     <div id="tree_inside">
          <!-- MENU CONTENT HERE -->
     </div>
</div>

**jscheuer1** · 08-08-2007, 03:06 AM

Originally Posted by alexjewell

The simple solution to stopping the div from getting bigger is by putting a div inside of it with a margin:

Code:

#tree {
	float:left;
	width: 30&#37;;
	height: 100%;
	background-color: #008000;
	border: 0px;
	z-index: 0;
	position: absolute;
	top: 0px;
	left: 0px;
}

#tree_inside{
margin-top: 100px;}

HTML Code:

<div id="tree">
     <div id="tree_inside">
          <!-- MENU CONTENT HERE -->
     </div>
</div>

Hey, that does work well!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#wrapper {
	width: 100%;
	height: 100%;
	z-index: 0;
	position: absolute;
	top: 0px;
	right: 0px;
	overflow:hidden;
}

#menu {
	width: 100%;
	height: 100px;
	background-color: #ffff00;
	border: 0px;
	z-index: 1;
	position: absolute;
}

#tree {
	float:left;
	width: 30%;
	height: 100%;
	background-color: #008000;
	border: 0px;
	z-index: 0;
	position: absolute;
	top: 0px;
	left: 0px;
}

#tree_inside, #input_inside {
margin-top: 100px;
}

#input {
	width: 70%;
	height: 70%;
	float: right;
	background-color: #ffa500;
	overflow: auto;
	border: 0px;
	z-index: 0;
}

#description {
	width: 70%;
	height: 30%;
	float: right;
	background-color: #add8e6;
	overflow: auto;
	border: 0px;
	z-index: 0;
}
</style>
</head>
    <body>
		<div id="menu">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu</div>
		<div id="wrapper">
			<div id="tree"><div id="tree_inside">tree</div></div>
			<div id="input"><div id="input_inside">input</div></div>
			<div id="description">description</div>
		</div>
    </body>
</html>

But, there will still be the problems I mentioned before.

**Twey** · 08-08-2007, 03:15 AM

I never said there was anything invalid about [using absolute positioning]. It will make it difficult to load the normal sorts of content one often finds on pages into the design and have them displayed well under the variety of user end conditions/agents that exist on the web.

Not when used correctly, as here.

**jscheuer1** · 08-08-2007, 03:23 AM

Originally Posted by Twey

Not when used correctly, as here.

We'll see, the page (as near as I can tell) cannot expand beyond the window.

Thread: Why is this padding expanding my div?

Thread Tools

Search Thread

Why is this padding expanding my div?

Bookmarks

Bookmarks

Posting Permissions