2

It seems a duplicated question but unfortunately I didn't find answers for this simple scenario when the Position is Relative.

I have a parent div with two child divs:

<div id="content">
    <div id="content_rdivider">&nbsp;</div>
    <div id="content_right"></div>
</div>

where both parent and child divs have a position:relative;

A Jsfiddle example is HERE

So my question is almost like THIS question but the position is not absolute here.

How do I make the height of content_rdivider div the same as the height of the parent div?

Community
  • 1
  • 1
Alaa Alweish
  • 8,904
  • 16
  • 57
  • 84

1 Answers1

4

try this

http://jsfiddle.net/9c4MK/15/

CSS

#content {
    position: relative;
    background-color: #FFF;
    width: 975px;
    padding: 0px 0px 0px 0px;
    background-repeat: no-repeat;
    background-position: bottom left;
    border: solid 1px #d7d7d7;
    border-bottom: none;
    margin-left: auto;
    margin-right: auto;
    direction: ltr;
    overflow: hidden;
    height: auto;
    display: table;
}
#content_right {
    width: 180px;
    text-align: right;
    display: table-cell;
}
#content_rdivider {
    width: 10px;
    text-align: center;
    background-color: red;
    position: relative;
    height: 100%;
    display: table-cell;
}
Falguni Panchal
  • 8,873
  • 3
  • 27
  • 33
  • @Fags, Thanks for your answer, However it's not working when a float is there, please check out [This](http://jsfiddle.net/9c4MK/21/) – Alaa Alweish Aug 02 '13 at 08:43
  • @Ala ==> float:left remove in this class #content_rdivider its working perfectly please try http://jsfiddle.net/9c4MK/22/ – Falguni Panchal Aug 02 '13 at 08:45