Geek asks and answers

How to make a wrap div element with a relative position match the height of the children?

I have a simple problem when I have 2 divs, 1 is relative position. The baby element is absolute. This child has a different height.

Code so far:

HTML

<div id="wrap"><div id="inner"></div></div>

CSS

#wrap {
    width: 100%;
    background: #ccc;
    position: relative;
    min-height: 20px;
}

#inner {
    width:30%;
    background: #000;
    position: absolute;
    right: 0;
    top: 0;
    height: 200px;
}

The problem is that the #wrap element does not adjust its height to fit the child element, and therefore the child element hangs outside the parent. Can this be done with relative and absolute positioned elements?

I know that this can be achieved with floating elements and after them with css => cleared: both, but I would like to know if this is possible with this method.

I created jsfiddle of this problem if someone would like to help me!

Many thanks.

+3
2

, .

:

#wrap {
    width: 100%; /* useless */
    background: #ccc;
    overflow:hidden; /* establish a new formatting context */
    min-height: 20px;
}

#inner {
    width:30%;
    background: #000;
    float:right;
}
+7

, position: relative height, position: absolute.

, :

. ( ). ( ) . .

http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning

position, JavaScript height div.

float, . @MatTheCat .

, ​​ @MatTheCat height: 200px, , div height: http://jsfiddle.net/gR2wL/3/

+8

More articles:


All Articles