CODEWITHSUNDEEP
csshtmlheightparent
Shahar
Shahar

Reputation: 11

Div child needs to have height of 100% of div parent

I have 2 divs, on which is set to be 60% width but no setting for the height, this is the parent. Inside of it I have a div which is set to be 15% width, 100% height (not working) and float:left. I have also tried to say the the div child have an absolute position (left:0px;top:0px;bottom:0px;) but then text from the parent div gets over it. Not such a good parent.

Clarification: I'm not putting two divs in the parent, only one (the child div). But I do put some text in the parent div.

Here is the css code (It's a bit messy):

#parent{position:absolute;right:20%;width:60%;background-image:url('x.png');direction:rtl;margin-top:-1px;}
#child{width:15%;padding-right:12px;margin-top:-5px;padding-top:5px;float:left;height:100%;background-image:url('y.png');}

And here is the html code:

<div id="parent">
<div id="child">line 1<br>line 2<br>line 3<br></div>
some text here. some text here. some text here. some text here. some text here. some text here. some text here. some text here. some text here. some text here.
</div>

Please help me!

UPDATE:

I can't give the parent div a fixed height because I need it to adjust it self to the content (which is text that can't get over the child div). See the problem? It's fine to give me a totally different way to do it, I open to learn.

Upvotes: 0

Views: 3186

Answers (1)

user559633
user559633

Reputation:

Your parent must have a height value for the child to inherit.

I've removed the portions of your CSS that are not directly related to the answer in order to give you an example.

In your CSS sample, the child div is doing 100% of a non-set value.
This will not work as you expect:

#parent{background:#F00;}
#child{float:left; height:100%; background:#FF0;}

This will work:

#parent{height:500px; background:#F00;}
#child{float:left; height:100%; background:#FF0;}

Please let me know if I did not understand, but I believe this answers your question.

Upvotes: 5

Related Questions