Why I can't left div height to be same right div

Question

In bootstrap, I created two divs inline.

IN right div i have image with property width:100%, now my problem is left div , I want to set his height same of div col-sm-9, how to do that.

Yes easy way is to set height same for col-sm-3 and col-sm-9 but it's not semantic for images. Is it posible to calculate height of col-sm-9 and set thats value to col-sm-3?

http://jsfiddle.net/gdxvy575/

HTML

 <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <h2>This is title</h2>
                <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci </p>

            </div>
            <div class="col-sm-9">
                <img src="http://eibach.com/sites/eibach.com.m-global/files/pictures/project_cars/eibach_projektfahrzeug_vw_scirocco_1024x768_1.jpg" alt=""/>
            </div>
        </div>
    </div>

CSS

 .col-sm-3{
        height:100%;
        background-color:blue;
        color:white;
        font-weight:300;
    }
    .col-sm-9 img{
        width:100%;
    }

It possible only using`display: table-cell`. – kulaeff Nov 05 '15 at 11:40 — kulaeff, Nov 05 '15 at 11:40

score 1 · Accepted Answer · answered Nov 05 '15 at 11:39

1

HI now used to display property tabel-cell as like this

.col-sm-9, .col-sm-3{display:table-cell;vertical-align:top;float:none;}

Demo Link

answered Nov 05 '15 at 11:39

Rohit Azad Malik

31,410
17
69
97

score 0 · Answer 2 · answered Nov 05 '15 at 11:41

I have updated the Fiddle here

Fiddle

var imgHeight = $('.col-sm-9 img').height();
$('.col-sm-3').css("height", imgHeight);

.col-sm-3{
    height:100%;
    background-color:blue;
    color:white;
    font-weight:300;
}
.col-sm-9 img{
    width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <h2>This is title</h2>
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci </p>

        </div>
        <div class="col-sm-9">
            <img src="http://eibach.com/sites/eibach.com.m-global/files/pictures/project_cars/eibach_projektfahrzeug_vw_scirocco_1024x768_1.jpg" alt=""/>
        </div>
    </div>
</div>

Try this

Why I can't left div height to be same right div

2 Answers2