css - Auto height text content under relative (parent) content -

cant on problem. i've designed small container:

http://derrick.dk/ogmobi/2

the text content inside absolute. i'm trying make text container height responsive css no js...

i managed achieve on first one.. http://derrick.dk/ogmobi/1

i'd appreciate :)

the small rectangle is..

.left-area {   display: inline-block;   background-color: rgb(73, 50, 76);   width: 144px;   height: 29px;   margin-top: 109px;   margin-left: 0px;   position: absolute; } 

the description is..

.app-desc {       position: absolute;       display: inline-block;       width: 78%;       padding: 17px 10px 10px 30px;       border-radius: 5px;       color: #ffffff;       font-size: medium;     } 

here's right area..

.right-area {   display: inline-block;   background-color: rgb(73, 50, 76);   width: 88%;   height: 128px;   margin-top: 10px;   border-radius: 10px 10px 10px 0px; } 

every element needs sorta stay is.. example ratings too..

.app-rating {   position: absolute;   display: inline-block;   margin-left: -10%;   bottom: 0;   text-align: center;   width: 100%; } 

the position: absolute; on text block container positioning relative parent container it's overriding display: inline-block rule, child size attributes won't considered parent, because acting alone. if absolute removed parent containers fixed height block element growing containers height.

try following:

• remove absolute rule on .app-desc container
• remove fixed height on parent .right-area container , add height: 100%; ensure parent container reacts child block element
• then add min-height: .right-area container doesn't go short if there isn't enough content in child

please see example i've tried replicate scenario: jsfiddle (i wasn't sure position icons/buttons may need tweaking)

hope helps, , if want know anymore positioning absolute relative parents , how react block elements there's loads of documentation , examples on w3 school site - position section