Question

I’m building a website and having some problem.

if the HTML code is like:

<div class="parent">    
    <div class="child">
         **contents1**
    </div>

     **contents2**
</div>

and the CSS stylesheet like:

.parent{ position: relative;}
.child{ position: absolute; top: 10px; left: 20px;}

In that situation, the border of ‘parent’ doesn’t contain the area of ‘child’,
but only the bounding box of contents 2.

Is there a way to solve it?

I want that the bounding box of parent includes its children’s bounding boxes regardless of their position attribute.

I may be able to calculate the size of parent through JQuery,

but I think there is a way I can do just with CSS.

Hope to get a positive answeres.

Thanks!

Answer 1

position:absolute; takes the element out of document flow – that’s pretty much the point of the property.

If your .child has a static height however, you can get away by applying an appropriate padding to its parent like so:

.parent{position:relative;padding-top:60px;} /*(40+10*2)px*/
.child{position:absolute;top:10px;left:20px;height:40px;}

Fiddled

Chances are absolute positioning has been abused if you still want to account for .child dimensions and you could probably get away with an alternative (hard to suggest something without better context)

I’d generally suggest you not use anonymous blocks either.