Div doesn't autoresize with absolute content div

Question

<style type="text/css">
.a {
 border: 1px solid #000;
 position: relative;
}

.b {
 background: #F93;
 position: absolute;
 top: 50px;
 left: 50px;
}
</style>
<div class="a">
  <div class="b">test</div>
</div>

a's height doesn't autoresize with it's content(beause b has flow), but how to resolve this problem, use css possible, not javascript.

Answer 1

Try "float: left;" in both classes. Didn't test, however. In wich browser are you testing?

Answer 2

If you are expecting to see your a-div resize, then I think you've misunderstood something. When you set an element to be absolute, you're taking it out of the "rendering flow", which means it won't interfere with any other elements on the page.

Answer 3

if div b is positioned absolute it's not considered 'inside a' anymore, because it's not rendered inside of it.

so div a will not resize as div b gets larger or smalller...

Answer 4

By setting position: absolute you're taking the div outside the normal document flow, which is why the container won't resize to contain it.

Did you want to set margin-top: 50px; margin-left: 50px; instead?

Answer 5

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

You see the following documentation: Absolute positioning

Answer 6

When you have Div with position:relative, you can control any obsolute element inside. In fact, obsolute Div is out of the flow of the normal document as Greg mentioned above. As I see you set left and top for b and then if you set width of a to 60px like this. Your is outside the parent box. This is how obsolute elements work.