3 Replies - 1912 Views - Last Post: 20 December 2009 - 04:59 AM

#1 sOwL  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 30
  • Joined: 18-November 07

Css div height:auto

Post icon  Posted 17 December 2009 - 03:31 PM

Hello everyone. I've got an irritating problem, and i'd like some help here... So let me give you an example:

<div id="parent" style="height:500px;">
  <div id="child" style="height:auto;">
  </div>
</div>



So the problem is, child should be automatically getting 500px height, but it doesnt... Why is that? Is there another way for doing this?

Is This A Good Question/Topic? 0
  • +

Replies To: Css div height:auto

#2 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: Css div height:auto

Posted 17 December 2009 - 04:06 PM

If you want it to be 500px high, you'd want height:100% - height:auto just allows the div to automatically scale its height to the height of its contents.
Was This Post Helpful? 0
  • +
  • -

#3 sOwL  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 30
  • Joined: 18-November 07

Re: Css div height:auto

Posted 17 December 2009 - 04:13 PM

nice, thank you. But what if i wanted the parent to have a height depending on the child's height? Lets say the child is on height:auto, how can the parent automatically get the same height with the child? And if that an be done, can it be set to go like +10px more than whatever the child is? Sorry if my sentence is too confusing
Was This Post Helpful? 0
  • +
  • -

#4 Cbeppe  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 31
  • View blog
  • Posts: 215
  • Joined: 16-September 09

Re: Css div height:auto

Posted 20 December 2009 - 04:59 AM

Try setting both to ":auto", that's what I would do. Then add some padding to the parent div.

The code should look something like this:

<!--If you want the padding to affect more than the bottom of the parent 
div, just remove the "-bottom" part of the code.-->
<div id="parent" style="height:auto; padding-bottom:10px;">
  <div id="child" style="height:auto;">
  <p>The length of this paragraph should determine the height for both 
		 divs.</p>
  </div>
</div>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1