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

[srkz]

Hi.
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.

Any help?
Here is the code (It’s a bit messy):

#parent{position:absolute;right:20%;width:60%;background-image:url('x.png');direction:rtl;margin-top:-1px;}

#margin{width:15%;padding-right:12px;margin-top:-5px;padding-top:5px;float:left;height:100%;background-image:url('y.png');}

[srkz]

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

line 1
line 2
line 3


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.

Any help? Again?

By the way, your example dosn’t work.

[Mottie]

First off, don’t use direction: rtl; unless your page is in a language that is rtl. It does other things that I don’t know about that will mess up your layout. Use text-align:right; instead.

Here is what I came up with, I’m not sure why the parent is absolutely positioned, so I had to work with it from there, so it may not be the best (demo).

#parent {

position:absolute;

right: 20%;

width: 45%; /* 60% if you include the padding-left */

padding-left: 15%;

background-image: url('x.png');

text-align: right;

}

#margin{

width: 15%;

height: 100%;

padding-right: 12px;

position: absolute;

left: 0;

top: 0;

bottom: 0;

background-image: url('y.png');

}

[srkz]

Thank you very much! This is solving the problem perfectly!
By the way, the parent div isn’t have to be absolutely positioned, it can also have float:left; but then there is another problem. And yes, I write in hebrew which is from right to left.
Thank again.

[Author]

Posts