CODEWITHSUNDEEP
htmlcsstextheight
Patrioticcow
Patrioticcow

Reputation: 27058

how to grow height with the amount of text in css?

i have this situation 

<div class="sub_project">
    <div class="sbone brown_gradient optzeci">Description</div>
    <div class="sbtwo optzecitwo">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
    </div>
</div>

.sub_project{
    font-size: 16px;
    margin: 10px 0;
    background: #D7D7D7;
}

.brown_gradient{
    background: #EB994F;
}
.sbone{
    padding: 5px;
    color: white;
    float: left;
    width: 160px;
    margin: 0 10px 0 0;

}

.sbtwo{padding: 5px;}

.optzeci{height: 80px;}
.optzecitwo{min-height: 80px;} * html .optzeci { height:80px; }

I would like the <div class="sbone brown_gradient optzeci">Description</div> height to grow with the amount of text.

Right now i set a min-height: 80px; but i do't want to set height at all.

Also i don't want to use images or javascript

See jsfiddle

any ideas?

Thanks

Upvotes: 0

Views: 153

Answers (2)

gilly3
gilly3

Reputation: 91657

Relatively position the container, .sub_project, and give it left padding. Absolutely position .optzeci and give it top: 0; left: 0; bottom: 0;.

http://jsfiddle.net/W7Nrn/9/

.sub_project {
    ...
    padding-left: 175px;
    position: relative;
}
.optzeci {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

Upvotes: 2

Lokesh Yadav
Lokesh Yadav

Reputation: 1602

if you can use jquery then you can assign height to the box on the fly. you just need to get the height on the div containing your text then assign the same height to description box.

here is my try: http://jsfiddle.net/W7Nrn/6/

Upvotes: 0

Related Questions