CODEWITHSUNDEEP
html
Master
Master

Reputation: 2163

How to have two Columns with same height length

I have two columns, first column has an image, second is the article. The article has a ton of "Empty spaces" I would like the height of the article to be the same height as the image so there's not visible empty space.

<article>
  <div class="row">
    <div class="row-sm-height">
      <aside class="col-sm-6 ">
        <img src="http://i0.wp.com/www.sooziq.com/wp-content/uploads/2015/11/32.jpg?resize=270%2C200" />
      </aside>
      <aside class="col-sm-6">
        <div>
          <span> <a href="http://www.sooziq.com/category/miscellaneous/" id="A_1">Basketball</a></span>
          <h2 id="H2_2">
                                <a href="http://www.sooziq.com/22045/he-colored-his-phones-camera-the-reason-why-will-amaze-you/" rel="bookmark" id="A_2">What really Matters</a>
                            </h2>
          <span id="SPAN_2">November 12, 2015</span>
          <p>
        Make sure you load up on the fluids and snacks and use the washroom because these are the top 3 things to watch for in basketball! <a href="http://www.sooziq.com/22045/he-colored-his-phones-camera-the-reason-why-will-amaze-you/" id="A_3">Read More</a>
          </p>
        </div>
      </aside>
    </div>
  </div>
</article>

Demo

http://codepen.io/anon/pen/WQVxor

I would like it to also be responsive, I can get the height to match using trial and error but I don't think that's the right approach.

Upvotes: 0

Views: 306

Answers (2)

VictorySaber
VictorySaber

Reputation: 3164

Assuming that your images will be the same size one the same device you can set the min-height.

Add a new class to the div that is your article (not the one with "col-x"). Set the class to have a min-height of Npx.

As an example for your CSS:

div.image-article {
    min-height: 250px;   
}

If making it responsive you probably have your images smaller on different devices. Use a media query for these.

div.image-article {
@media (min-width: 0) {
    min-height: 250px;
}
@media (min-width: @screen-xs-min) {
    min-height: 250px;
}
@media (min-width: @screen-sm-min) {
    min-height: 275px;
}
@media (min-width: @screen-md-min) {
    min-height: 290px;
}
@media (min-width: @screen-lg-min) {
    min-height: 320px;
}
}

Upvotes: 0

sunquan
sunquan

Reputation: 322

The most simple and maybe also the best solution in your case is to make the 2 columns' parent div have the same background color as the 2 columns do so it looks like the article column has expanded.

In your css, find .row-sm-height under @media (min-width: 768px) and add the background color:

.row-sm-height {
    display:table-row;
    background: #f7f7f7;
}

And you just need to do nothing about specifying any height. It just adjusts to your image height.

Upvotes: 3

Related Questions