title: How to position 3 images in two equal height columns?
body: <p>How can I position 3 images like this with CSS?</p>
  
  <p><a href="https://i.stack.imgur.com/g1Ymo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g1Ymo.jpg" alt="enter image description here"></a></p>
  
  <p>I've tried multiple methods such as <code>inline-block</code> to position my images like the image above, but all went wrong. I have also tried looking through the internet to find a tutorial on this sort of thing, but couldn't find anything that could help me.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
  @import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);
  
  html {
    height: 100%;
    box-sizing: border-box;
  }
  
  body {
      width: 1500px;
      text-align: center;
      font-family: arial;
      margin: 0 auto;
  }
  
  header ul {
     display: flex;
     list-style-type: none;
     justify-content: space-around;
     padding-bottom: 10px;
     align-items: center;
     border-bottom: 2px solid black;
     font-family: 'Source Code Pro';
  }
  
  footer ul {
    display: inline-block;
    list-style-type: none;
    align-items: center;
    font-family: 'Source Code Pro';
  
  }
  
  .logo {
      font-family: 'Source Code Pro';
      font-size: 40px;
      padding-top: 20px;
      font-weight: lighter;
  
  }
  
  /* Website nav code */
  #top-nav ul {
      list-style-type: none;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  
  /* Shop nav code */
  #bottom-nav {
    display: flex;
    list-style-type: none;
    justify-content: space-around;
    margin-top: 50px;
    padding-bottom: 10px;
    align-items: center;
    font-family: 'Crimson Text';
  }
  
  #bottom-nav ul {
      list-style-type: none;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  #bottom-nav ul li {
      display: inline-block;
      padding: 15px 20px 0 20px;
  }
  
  nav ul {
      list-style-type: none;
  }
  
  .info {
      display: none;
      color: #fff;
      left : 0;
      top : 45%;
      right : 0;
      text-align : center;
      position: absolute;
  }
  
  /* Images code */
  
  /* Footer code */
  #footer {
      background: black;
      text-align: center;
      color: white;
    width:100%;
    float:left;
   }
  
    .wrap {
  
      position:relative;
      margin:0 auto;
      width:900px;
        height: 200px;
     }
  
    .wrap ul {
      list-style-type: none;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"/&gt;
      &lt;title&gt;Gullible&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/women.css" media="screen" title="no title" charset="utf-8"/&gt;
      &lt;link href="normalize.css" rel="stylesheet" type="text/css"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
      &lt;script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&amp;amp;sensor=false"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;header&gt;
        &lt;nav id="top-nav"&gt;
          &lt;h1 class="logo"&gt;&lt;a href="index.html"&gt;Gullible&lt;/a&gt;&lt;/h1&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="shop.html"&gt;Shop&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="visit.html"&gt;Visit&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
      &lt;nav id="bottom-nav"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="shop.html"&gt;Men&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="women.html"&gt;Women&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="denim.html"&gt;Denim&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="suits.html"&gt;Suits&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="dresses.html"&gt;Dresses&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="accessories.html"&gt;Accessories&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div id="jacket" class="pics"&gt;&lt;img src="http://i.imgur.com/YJMNEtS.jpg"/&gt;
        &lt;div class="overlay"&gt;&lt;/div&gt;
        &lt;div class="info"&gt;
          &lt;p class="text"&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;div id="jacket1" class="pics"&gt;&lt;img src="http://i.imgur.com/xWJN7RP.jpg"/&gt;
        &lt;div class="overlay"&gt;&lt;/div&gt;
        &lt;div class="info"&gt;
          &lt;p class="text"&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="hoodie" class="pic"&gt;&lt;img src="http://i.imgur.com/47iFqA1.jpg"/&gt;
        &lt;div class="overlay"&gt;&lt;/div&gt;
        &lt;div class="info"&gt;
          &lt;p class="text"&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      &lt;div id="" class="pic"&gt;&lt;img src=""/&gt;
        &lt;div class="overlay"&gt;&lt;/div&gt;
        &lt;div class="info"&gt;
          &lt;p class="text"&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
        &lt;div class="wrap"&gt;&lt;strong&gt;FIND US ON&lt;/strong&gt;
           &lt;ul&gt;
             &lt;li&gt;&lt;a href=""&gt;Twitter&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;Facebook&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;Pintrest&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;Instagram&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
         &lt;/div&gt;
         &lt;div class="wrap"&gt;&lt;strong&gt;NAVIGATION&lt;/strong&gt;
           &lt;ul&gt;
             &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;Shop&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;Visit&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
         &lt;/div&gt;
       &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>