ansaurus

Question

Answer 1

+4 A:

The problem is described (among other) in this article.

#box is relatively positioned, which makes it part of the "flow" of the page. Your other divs are absolutely positioned, so they are removed from the page's "flow".

Page flow means that the positioning of an element effects other elements in the flow.

In other words, as #box now sees the dom, .a and .b are no longer "inside" #box.

To fix this, you would want to make everything relative, or everything absolute.

One way would be:

.a {
   position:relative;
   margin-top:10px;
   margin-left:10px;
   background-color:red;
   width:210px;
   padding: 5px;
}

Tim Hoolihan 2009-07-16 13:23:36

Thanks, but thing is, it's not my choice to use this positioning. I'm using a jQuery plugin that will make a and b absolute positioned.

Justine 2009-07-16 13:40:05

can you make #box absolutely positioned? also, jquery could change the css of those items after your plugin runs.

Tim Hoolihan 2009-07-16 14:34:18

Answer 2

+1 A:

The absolute divs are taken out of the flow of the document so the containing div does not have any content except for the padding. Give #box a height to fill it out.

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
    height:30px;
}

Emily 2009-07-16 13:29:27

Thanks for the tip. The problem with the height is that it doesn't push the "after" div down, just covers it.

Justine 2009-07-16 13:38:38

It should. See here: http://ejgejg.com/test/abs.html Are there any other styles applied to after?

Emily 2009-07-16 13:47:27

You're right, was just my bad, thank you!

Justine 2009-07-16 14:07:17

Answer 3

A:

One of #a or #b needs to be not position:absolute, so that #box will grow to accommodate it.

So you can stop #a from being position:absolute, and still position #b over the top of it, like this:

<style>
#box {
    background-color: #000;
    position: relative;     
    padding: 10px;
    width: 220px;
}

.a {
    width: 210px;
    background-color: #fff;
    padding: 5px;
}

.b {
    width: 100px; /* So you can see the other one */
    position: absolute;
    top: 10px; left: 10px;
    background-color: red;
    padding: 5px;
}

#after {
    background-color: yellow;
    padding: 10px;
    width: 220px;
}
</style>
<div id="box">
    <div class="a">Lorem</div>
    <div class="b">Lorem</div>
</div>
<div id="after">Hello world</div>

(Note that I've made the widths different, so you can see one behind the other.)

Edit after Justine's comment: Then your only option is to specify the height of #box. This:

#box {
    /* ... */
    height: 30px;
}

works perfectly, assuming the heights of a and b are fixed. Note that you'll need to put IE into standards mode by adding a doctype at the top of your HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd"&gt;

before that works properly.

RichieHindle 2009-07-16 13:30:50

Thanks you. But like I said in the comment to Tim's answer, I'm using a jQuery plugin that will make a and b absolute positioned, so can't make them not positioned.

Justine 2009-07-16 13:41:12

Yes, I ended up adding height to the #box. Thanks!

Justine 2009-07-16 15:22:02

Answer 4

A:

Obrigado !!! Thanks !!!

2009-07-31 18:14:43

ansaurus

tags:

views:

answers:

How to position absolute inside a div?

related questions