Absolute Positioning Ignores Padding in Parent Element

**LavernGingerich** · Aug 25, 2007 14:12

Hello,

I am using absolute positioning to lay some text on top of an image.

The parent element of my box1 div (which holds the text) has left and right padding. The absolute positioning ignores the padding in IE 5.01, 5.5, and 6. It looks fine in my other browsers.

Here is my CSS:

Code:

#main {
  clear: both;
  text-align: center;
  padding: 20px 0;
  position: relative;
}
.box1 {
  width: 163px;
  height: 246px;
  position: absolute;
  top: 61px;
  right: 37px;
}

Can you help me to make this look the same in earlier versions of Internet Explorer and in Firefox?

**CaryD** · Aug 25, 2007 21:47

Can you provide a url for the page so we can look at it with text, images and everything else? Unfortunately, there isn't enough to go on here to solve the problem.

Short of seeing the actual page I can only suggest either removing the padding from the parent element or avoid using absolute positioning.

**LavernGingerich** · Aug 27, 2007 08:17

Here is the page:

wwwDOTnewcdesignsDOTcom/wayside

**all4nerds** · Aug 27, 2007 08:21

Hello

Thats what absolutes do , ignore everything else

**LavernGingerich** · Aug 27, 2007 08:25

Why does the padding move it to the left then?

**all4nerds** · Aug 27, 2007 08:50

Originally Posted by LavernGingerich

Why does the padding move it to the left then?

Hello

? the only difference i get is when i wrap or not wrap the absolute

wrapped

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>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- saved from url=(0022)http://www.domain.com/ -->
<style type="text/css">
#main {
clear: both;
text-align: center;
padding:20px 0;
position:relative;
background:#ffffcc;
}
.box1 {
width: 163px;
height: 246px;
position: absolute;
top: 61px;
right: 37px;
background:#ccffcc;
}
</style>
<script type="text/javascript">

</script>
</head>
<body>

<div id="main">main

<div class="box1">box1</div>

</div>

</body>
</html>

**LavernGingerich** · Aug 27, 2007 09:20

I am sorry! It's actually box1's "grandparent" element that has padding.

I applied a width: 756px to #main. Now it looks great.

Thanks for your input, guys!

User Tag List

Thread: Absolute Positioning Ignores Padding in Parent Element

Thread Tools

Display

Absolute Positioning Ignores Padding in Parent Element

Bookmarks

Bookmarks

Posting Permissions