Make a div adjust its height to its absolutely positioned children

Question

I have a div element (default positioning) containing and h1 and a link, both of which have absolute positioning. Naturally, the div elements height collapses. How do I make the div element adjust its height to its two children? I have tried standard clearfixes, setting overflow to auto and setting the div's position to relative (which was a suggestion from another post i found) but none of them has worked.

I made a jsfiddle that illustrates my problem.

HTML Code:

<div>
  <h1>the div doesnt go around this element</h1>
</div>

CSS Code:

div {border: 2px solid;}
h1 {position: absolute;}

Seems like it has a javascript answer [here](http://stackoverflow.com/a/9061682) — Leon Freire, Feb 14 '17 at 16:06
this is the behavior expected. Why do you need h1 to be absolutely in position:absolute ? :) .... **maybe you need the div in absolute position and not its children** — G-Cyrillus, Feb 14 '17 at 16:30

score 0 · Answer 1 · answered Feb 14 '17 at 16:08

0

Use min-width for div in css such that it covers the height required for children.

answered Feb 14 '17 at 16:08

J Shubham

609
7
21

2

Now you are just assuming these heights are not variable. – Mart Feb 14 '17 at 16:17
They are. But in this case, it can be assumed constant as only 2 elements are there. – J Shubham Feb 14 '17 at 16:22

score 0 · Answer 2 · answered Feb 14 '17 at 16:22

0

I made a jsfiddle helping you to solve this issue using jquery: https://jsfiddle.net/9hubfbxt/

the html code:

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

  </div>
  <div id="child2" class="child">

  </div>
</div>

the jquery:

var height = 0;
$("#parent .child").each(function() {
    height = height + $(this).outerHeight(true);
});

$("#parent").height(height);

Now the height can be anything depending on just whatsever inside.

EDIT: i edited your jsfiddle with my jquery workaround: https://jsfiddle.net/4yuco4cL/1/

answered Feb 14 '17 at 16:22

Mart

475
4
21

1

my goal would be to solve it just using css but if i wont find anything i'll probably use your jquery code. – Lukeception Feb 14 '17 at 16:33
got that, but then the only solution you have is either making the elements relative, as you said you don't want to.. or you have to know the height of the inside elements and set these heights combined as the height of the parent. – Mart Feb 14 '17 at 16:36

Make a div adjust its height to its absolutely positioned children

2 Answers2