Take the 2-minute tour ×

I'm building a website and having some problem.

if the HTML code is like:

<div class="parent">    
    <div class="child">


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.


share|improve this question
Non taken, would you please describe more? –  Tooraj Jun 24 '12 at 2:04
It's not possible with CSS only. An absolute positioned element is loose from it's parent. But if you tell, what the final layout should be, we maybe find a solution with floating elements or some other way to get it right. –  insertusernamehere Jun 24 '12 at 2:13
add comment

1 Answer

up vote 2 down vote accepted

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*/


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.

share|improve this answer
add comment

Your Answer


