1 Replies - 2056 Views - Last Post: 09 June 2013 - 11:31 PM

#1 wonopon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 09-June 13

Child div height exceeding parent div height

Posted 09 June 2013 - 12:49 PM

My header has two child divs, both of which are floated to the left. Both of the child divs do not inherit my parent div's height. I tried clearfix, but it moved my second child div under the header. I tried overflow:hidden on the parent, but that made the content inside my child divs not centered.

Is there a way to make my child divs properly inherit my parent's height? Or do I have to overflow:hidden the parent and edit the children's content to be centered properly inside the div?

Here's a pic of the problem : http://i42.tinypic.com/20jpmbc.png

Here's my code : http://jsfiddle.net/PDHWT/

Thanks guys!

Is This A Good Question/Topic? 0
  • +

Replies To: Child div height exceeding parent div height

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: Child div height exceeding parent div height

Posted 09 June 2013 - 11:31 PM

Quote

Both of the child divs do not inherit my parent div's height.

floated elements do not inherit any parent height by definition.

I could imagine 2 workarounds:
- put another (non-floated) div underneath that clears the floats.
- use display: inline-block instead of float
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1