CODEWITHSUNDEEP
htmlcss
Joe Hav
Joe Hav

Reputation: 145

Grow div height depending on its neighbour

I want to make a div grow its height depending of its neighbours height. The problem is I have to be able to give them a minimum height. (130px). I think it's a very basic problem but I don't get it, hope someone can help me.

Problem:

Following situation: jsFiddle

HTML

<div class="guide">
    <div class="guide-image"><img src="http://lorempixel.com/64/36" /></div>
    <div class="guide-descr">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
</div>

CSS

*
{
    margin: 0;
    padding: 0;
}

div.guide
{
    width: 800px;
}

div.guide-image
{
    float: left;
    width: 250px;

    background-color: #B0BAC9;
}

div.guide-image img
{
    display: block;
    margin: 40px auto;

    max-width: 90%;
    max-height: 80%;
}

div.guide-descr
{
    float: left;
    width: 550px;

    padding: 25px 25px 25px 25px;
    box-sizing: border-box;

    background-color: #116FD1;
}

Upvotes: 1

Views: 1003

Answers (1)

DaniP
DaniP

Reputation: 38252

Using display property instead of float can lead to your goal. Try this:

div.guide
{
    display:table;
    width: 800px;
}

div.guide-image
{
    display:table-cell;
    vertical-align:middle;
}
div.guide-descr
{
    display:table-cell;
    vertical-align:middle;
}

Check the DemoFiddle

Antoher way can be using flexbox method but chek if you can support that Here

div.guide
{
    display:flex;
    width: 800px;
}

Demo for Flex DemoFiddle

Upvotes: 2

Related Questions