set the same height columns

Question

I have image gallery with 4 images.

Images can be different height, but i need with html/css make the same height columns (images stretched).

Everything works fine, until I do not put <!DOCTYPE html>

All other page works with this DOCTYPE, so i can't remove it.

How fix my code, that it functions well with my DOCTYPE?

img {
  width: 100%;
  max-width: 100%;
}
.cb {
  clear: both;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.col1 {
  width: 40%;
  flex-flow: column;
  display: flex;
}
.col2 {
  width: 60%;
}
.gallery-top {
  display: flex;
}

<div class="gallery-top">
  <div class="fl col1">
    <div class="">
      <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=40" />
    </div>
    <div class="" style="flex: 1; display: flex;">
      <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=120" />
    </div>
    <div class="cb"></div>
  </div>
  <div class="fl col2">
    <div class="">
      <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=80" />
    </div>
    <div class="">
      <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=80" />
    </div>
    <div class="cb"></div>
  </div>
  <div class="cb"></div>
</div>

If you're using ` `, you're using html5. In html5 you don't need to close self-closing tags like `` — Luuuud, Nov 28 '16 at 16:21

Tanasos · Accepted Answer · 2016-11-28T16:47:51.657

1

The <!DOCTYPE html> tells the browser that the code present is HTML5, therefore the browser understands it correctly. All of your documents should have it in place.

Please see this link for further reading.

Your markup(html) is a bit messy, You have empty class attributes. Try to always keep Your code clean and organized. Use classes, id's and reference them in Your stylesheet properly. Do not use inline styles unless Your specific issue at hand requires them.

This said, I suggest that You learn more about using flexbox and avoid using it inline for future instances.

You can find more about using flex-box here.

I made a Fiddle to help you better understand the concept.

edited Nov 28 '16 at 16:47

answered Nov 28 '16 at 16:36

Tanasos

3,928
4
33
63

Thanks for code, but this code works only if images is the same height. If in the same column one image is 40 and second 120 - then you get white space in bottom. – lolalola Nov 28 '16 at 19:18
This might be it https://jsfiddle.net/qe20e5ve/1/ , but the columns will have to be with a fixed equal width, otherwise you will experience the gaps again. What you are after is not possible with Flexbox, and you will have to use a plugin like http://masonry.desandro.com/ – Tanasos Nov 29 '16 at 08:56

set the same height columns

1 Answers1