title: How to inline two image Divs inside a Div?
body: <p>I am struggling to place both divs inline by each other, any suggestions people? Everything I am trying within CSS is not working like Float(img-1): Left and Float (img-2): Right, display: inline-block etc.</p>
  
  <pre><code>&lt;div class="multimedia-img"&gt; 
    &lt;div class="img-1"&gt;  
      &lt;a href="https://www.youtube.com/"&gt;
      &lt;img src="images/youtube.png" style="width: 200px; height: 140px;"&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="img-2"&gt;
      &lt;a href="https://www.ted.com/talks"&gt;
      &lt;img src="images/ted.png" style="width: 200px; height: 160px;"&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Added my CSS below to show you what I have done so far...</p>
  
  <pre><code>body{
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #505050;
      height: auto;
      min-height: 100%;
  }
  
  .container{
  
      width: 1000px;
      margin: 0 auto;
      background-color: white;
      display: block;
      overflow: auto;
  }
  
  .content{
      width: 100%;
      margin: auto;
      padding-bottom: 5px;
      color: #1B0C0C;
      height: 114px;
      text-align: center;
      padding-top: 40px;
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      white-space: pre-line;
  }
  
  .hobbies{
      margin: auto;
      width: 100%;
  }
  
  .img-hobby {
      width: 50%;
      height:100%;
      float: left;
      margin-top: 47px;
      margin-right: -295px;
  }
  
  .text-hobby {
      height: 100%;
      margin-top: 8%;
      margin-left: 20%;
  
  }
  
  .friends{
      margin: auto;
      width: 100%;
  }
  
  .img-friends{
      width: 50%;
      height:100%;
      float: left;
  }
  
  .text-friends{
      height: 100%;
      margin-top: 8%;
      margin-left: 20%;
  
  }
  
  
  .multimedia-img{
  
      display: inline-block;
  }
  
  .img-1{
      width: 50%;
      float: left;
  }
  
  .img-2{
      width: 50%;
      float: right;
  }
  
  
  img{
      padding-top: 17px;
      border-radius: 125px;
  }
  
  p{
      font-weight: bold;
  }
  
  
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      background-color: #333;
      top: 0;
      width: 100%;
      overflow: hidden;
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  
  
  }
  
  li {
      float: left;
  }
  
  li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  
  li a:hover {
      background-color: #61C8ED;
  }
  
  li a:hover:not(.header) {
      background-color: #000000;
  }
  
  .header{
      background-color: #61C8ED;
  }
  </code></pre>