1

I am using twitter-bootstrap framework to create an 'article' with two columns. text on one side, and a column with a background image on the right.

HTML

<article>

 <div class='container-fluid'>

  <div class="row">

    <div class="col-md-8 indx-img" style="background-image:url('...');">
    </div>

    <div class="col-md-4 col-md-pull-8">

      <div class="text-cell">
        <h1>ttitle</h1>
        <h3>text</h3>
      </div>

    </div>

    </div><!-- /#row -->

  </div><!-- /#post -->

</article>

I want the article to have a responsive height. (a % or something) that shrinks as the screen size decreases. I need both columns to have the same height (the background-img one needs a height in order to display the background image)

My current css uses padding to generate a responsive size to the background-img column (padding: 16% 0;), but doesn't affect the left column ( I want the text vertically centered in its column)

I tried height: 30%; on article, but it does't add any height to the columns themselves.

user3550879
  • 3,389
  • 6
  • 33
  • 62

1 Answers1

1

Chris Coyier has a good solution for this already. I recommend reviewing this: https://css-tricks.com/fluid-width-equal-height-columns/

Example from article:

HTML

<div id="css-table">
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
</div>

CSS

#css-table {
  display: table;
}
#css-table .col {
  display: table-cell;
  width: 25%;
  padding: 10px;
}
#css-table .col:nth-child(even) {
  background: #ccc;
}
#css-table .col:nth-child(odd) {
  background: #eee;
}
gautsch
  • 774
  • 6
  • 11
  • 3
    Please don't just paste links here, you should add code with some explaination – Tushar May 22 '15 at 05:59
  • @Tushar, according to the [faq](http://stackoverflow.com/help/how-to-answer) links are completely ok. It does not require code to accompany it. However, I will edit my answer and quote the relevant part of the article to improve the answer. – gautsch May 22 '15 at 06:44
  • The layout uses columns made with tables, I'm using columns made with Bootstrap – user3550879 May 23 '15 at 03:14