0

I'm working on a website and most of my page have this structure :

<div class="row">
 <div class="col-1-2">
  <img>
 </div>
 <div class="col-2-2">
  <p>Text</p>
 </div>
</div>

I would like that the image of the first column was at the same height as the text in the second column.

Does anybody knows how can I do that ?

Thanks in advance ;)

P.S : sorry for the bad english

Paul
  • 11
  • 2
  • 1
    I suppose you are using some kind of CSS Framework, Bootstrap or Foundation ? Take a look at these: [Bootstrap equal height columns](http://getbootstrap.com.vn/examples/equal-height-columns/), [Foundation equal height columns](http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html), [Fluid width equal height columns](https://css-tricks.com/fluid-width-equal-height-columns/) – Muhammet Nov 30 '15 at 10:51
  • No I used this website : http://www.responsivegridsystem.com/calculator/ – Paul Nov 30 '15 at 11:47
  • 1
    Check this out then http://stackoverflow.com/questions/2114757/css-equal-height-columns – Muhammet Nov 30 '15 at 12:09
  • Thank you muhammet, the flex solution works fine. My problem now is that I would like the image to occupy all the height of the column. Do you know how to do that ? – Paul Nov 30 '15 at 12:25
  • You are welcome! Try adding `align-items: stretch;` to `img`. – Muhammet Nov 30 '15 at 12:39

1 Answers1

0

you would have to set the image container as absolute and the row as relative and then set width as 50% to the column container and a height of 100%. the img should have max-width: 100% as a css property

Rovi
  • 259
  • 1
  • 3