Gallery grid of different size images

Question

Hello I am trying to replicate this design:

The size of the three images is the same and I am using Twitter Bootstrap, but cannot get them to align this way. The idea is to have the bigger image as 6 columns and then the other two would be 6, but on top of each other, aligning to the same height as the bigger one. Any ideas how I can tackle this or any libraries I can use?

EDIT: add current code

<div class="home-banner-option-three">
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-6 nopadding banner-left">
            <img class="img-responsive" src="" alt="Banner image" />
            <div class="banner-text">
              <h4 class="banner-title">text</h4>
              <p class="banner-paragraph">text</p>
              <a href="" class="btn banner-btn">text</a>
            </div>
          </div>
          <div class="col-sm-6 noppading banner-right">
            <div class="row">
              <div class="col-sm-6 nopadding">
                <div class="banner-xs-one">
                  <p>text</p>
                </div>
              </div>
              <div class="col-sm-6 nopadding">
                <div class="banner-xs-two">
                  <img class="img-responsive" src="" alt="Banner image" />
                  <div class="banner-text">
                    <h4 class="banner-title">text</h4>
                    <p class="banner-paragraph">text</p>
                    <a href="" class="btn banner-btn">text</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 nopadding">
                <div class="banner-sm">
                  <img class="img-responsive" src="" alt="Banner image" />
                  <div class="banner-text">
                    <h4 class="banner-title">text</h4>
                    <p class="banner-paragraph">text</p>
                    <a href="" class="btn banner-btn">text</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

I have removed all the unnecessary source paths and text to keep it readable

Answer 1

Something like this? It doesn't use twitter bootstrap or a grid system, its just a couple of simple floats.

 .large { float: left; margin-right: 10px; } .small { float: left; } .small img { height: 95px; display: block; } .small img:first-child { margin-bottom: 10px; } 

 <div class="gallery"> <img src="http://placehold.it/300x200" class="large" /> <div class="small"> <img src="http://placehold.it/300x200" /> <img src="http://placehold.it/300x200" /> </div> </div> 

Answer 2

You have to assign min-height to right blocks to match the height of left block. eg. html code.

<div class='col-md-8 block-left'>
</div>
<div class='col-md-4'>
   <div class='row'>
      <div class='col-md-12 block-right-top'></div>
      <div class='col-md-12 block-right-bottom'></div>
   </div>
</div>

css

.block-left{
        height:210px;
    }
    .block-right-top{
        min-height:100px;
        margin-bottom:10px;
    }
    .block-right-bottom{
        min-height:100px;
    }

Answer 3

First: Try to put it in 2 different

 <div class="row"> <div class="col-md-8 Height1"> <!--- Left Box----> <img src="..."/> </div> <div class="col-md-4"> <!--- Right Box----> <div class="col-md-12 Height2"> <img src="..."/> </div> <div class="col-md-12 Height2"> <img src="..."/> </div> </div> </div> 

Specify the height for col-md-8 - (Height1 class) Height1 has to be divided by 2 for Height2 class.

Use float is necessary. *NB: Not adding any custom CSS. So, plz do not check the output in "Run Code"