1

I'm working on a 'cards'-like interface, each 'card' (rectangular div in relative position) has multiple children positioned in absolute, and there are multiple divs on the same page like this.

I've spent a few hours looking for a solution to this with no success. From what I've read, it's not possible to do automatic height on a div with absolute children with CSS. I stumbled on a jQuery example as well, but I couldn't figure out how to manipulate that to work with multiple divs. I also tried clearfixing, and manipulating the overflow.

The page I've been working on (http://q.glorbi.com/profile.php) works and looks fine, but the height of each div is limited to 300 pixels, which may be too little or too much depending on its contents.

Does anyone know how to go about resizing multiple parents with absolute children? Any solution is fine, even if it relies on jQuery, etc!

Thank you!

Community
  • 1
  • 1
unicornication
  • 635
  • 2
  • 7
  • 26
  • 2
    What's the reason for the absolute positioning? You can perfectly/easily achieve the same layout just with some padding, which would immediately solve your problem. – ptriek Mar 27 '13 at 12:52
  • is it the div with class "box" that you are referring to? Also, @ptriek has a very good point ^ – Bill Mar 27 '13 at 12:53

1 Answers1

1

Each of your cards looks like this

<div class="box">
  <div id="askerdp"></div>
  <div class="question">Are you awesome?</div>
  <div class="answer">I am the awesomest human being alive.</div>
</div>

With .box relative and the inner divs absolute. Given the simple structure of each card, why don't you do this instead

<div class="box">
  <div class="container">
    <div id="askerdp"></div>
    <div class="question">Are you awesome?</div>
  </div>
  <div class="answer">I am the awesomest human being alive.</div>
</div>

And make .container relative, #askerdp absolute, and everything else static. This should solve your problem of auto height and still look the same as you have it now.

Kevin Tonon
  • 965
  • 10
  • 18