title: CSS 3 / How do I position 3 embedded videos next to each other?
body: <p>My problem is that I don't know how to properly position 3 videos next to each other - for some reason one of them always acts crazy and goes upwards. I tried floating, absolute positioning, now even a table and it still doesn't work!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* **************************** FONT IMPORTING ******************************* */
  
  @import url('https://fonts.googleapis.com/css?family=Raleway');
  
  /* ******************************************* GENERAL STYLING &amp; RESET ******************************************** */
  
  html, body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   color: #FFF;
   background-color: #4b3832;
  }
  
  
  /* ******************************************* NAV BAR STYLING ******************************************** */
  
  .headerInner {
   width: 100%;
   text-align: center;
   background-color: #854442;
   float: left;
  }
  
  .headerOuter h2 {
   margin-left: 7%;
   font-size: 200%;
   color: #fff4e6;
   font-family: "Raleway", sans-serif;
   float: left;
  }
  
  nav {
   width: 50%;
   float: right;
   padding: 20px;
  }
  
  .headerOuter nav ul li {
   list-style: none;
   display: inline;
   float: left;
   margin-right: 5%;
   margin-bottom: 2%;
  }
  
  .headerOuter nav ul li a {
   color: #fff4e6;
   font-family: "Raleway", sans-serif;
   text-decoration: none;
  }
  
  .headerOuter nav ul li a:hover {
   color: #be9b7b;
  }
  
  
  /* ******************************************* INTRO SECTION STYLING ******************************************** */
  
  .introOuter div {
   margin: 7% 5% 15% 10%;
   width: 40%;
   float: left;
   font-size: 150%;
  }
  
  .introOuter div h2 {
   margin-left: 15%;
   color: #ae0001;
  }
  
  .introOuter div p {
   margin-bottom: 10%;
  }
  
  .introOuter div a {
   padding: 2% 3%;
   text-decoration: none;
   color: #be9b7b;
   margin: 10% 5% 5% 30%;
   border: 2px solid #be9b7b;
  }
  
  .introOuter div a:hover {
   color: #ae0001;
   border: 2px solid #ae0001;
  }
  
  .introOuter img {
   margin: 5% 15% 10% 0%;
   float: right;
   width: 400px;
   height: 450px;
  }
  
  
  /* ******************************************* THREE COLUMNS SECTION STYLING ******************************************** */
  
  .threeColumns {
   float: left;
   width: 100%;
   margin: 5% auto;
   background-color: #854442;
  }
  
  .oneThird {
   float: left;
   width: 28%;
   font-size: 130%;
   margin-left: 4.5%;
  }
  
  
  /* *************************************** VIDEO GALLERY SECTION STYLING ******************************* */
  
  .videoGallery {
   margin-top: 10%;
   float: left;
   width: 100%;
   background-color: #854442;
  }
  
  .videoHeader {
   float: left;
   margin-left: 25%;
   text-align: justify;
   font-size: 150%;
   width: 50%;
  }
  
  .videoHeader h2 {
   margin-left: 35%;
  }
  
  .table {
   display: table;
  }
  
  .row {
   display: table-row;
  }
  
  .cell {
   display: table-cell;
  }</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;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
          &lt;title&gt;HHH CORP&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style/style.css" /&gt;
          &lt;link rel="stylesheet" href="style/font-awesome/css/font-awesome.min.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!-- *************************************** NAV BAR ******************************* --&gt;
          &lt;section class="headerOuter"&gt;
              &lt;div class="headerInner"&gt;
                  &lt;h2&gt;HHH CORP&lt;/h2&gt;
                  &lt;nav&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;TOP&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;OUR WORK&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;!-- *************************************** INTRO SECTION ******************************* --&gt;
          &lt;section class="introOuter"&gt;
              &lt;div&gt;
                  &lt;h2&gt;EXCELLENT WINE&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, nisl sed ornare pellentesque, urna nulla dignissim neque, a fermentum ligula ligula vestibulum risus. Ut non mi massa. Aliquam fermentum, leo ut sollicitudin porttitor, quam massa cursus ipsum, vitae blandit sapien odio vitae sapien. Vestibulum tincidunt a ligula nec gravida. &lt;/p&gt;
                  &lt;a href="#"&gt;CLICK ME!&lt;/a&gt;
              &lt;/div&gt;
              &lt;img src="img/wine.png" /&gt;
          &lt;/section&gt;
          &lt;!-- *************************************** THREE COLUMNS SECTION ******************************* --&gt;
          &lt;section class="threeColumns"&gt;
              &lt;div class="oneThird"&gt;
                  &lt;h2&gt;EXAMPLE HEADING&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, nisl sed ornare pellentesque, urna nulla dignissim neque, a fermentum ligula ligula vestibulum risus.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="oneThird"&gt;
                  &lt;h2&gt;EXAMPLE HEADING&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, nisl sed ornare pellentesque, urna nulla dignissim  neque, a fermentum ligula ligula vestibulum risus.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="oneThird"&gt;
                  &lt;h2&gt;EXAMPLE HEADING&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, nisl sed ornare pellentesque, urna nulla dignissim neque, a fermentum ligula ligula vestibulum risus.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;!-- *************************************** VIDEO GALLERY SECTION *******************************  --&gt;
          &lt;section class="videoGallery"&gt;
              &lt;div class="videoHeader"&gt;
                  &lt;h2&gt;OUR WORK&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, nisl sed ornare pellentesque, urna nulla dignissim neque, a fermentum ligula ligula vestibulum risus.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="table"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="cell"&gt;
                          &lt;iframe width="320" height="215"
                              src="https://www.youtube.com/embed/XGSy3_Czz8k"&gt;&lt;/iframe&gt;
                          &lt;h2&gt;A HEADER&lt;/h2&gt;
                      &lt;/div&gt;
                      &lt;div class="cell"&gt;
                          &lt;iframe width="320" height="215"
                              src="https://www.youtube.com/embed/XGSy3_Czz8k"&gt;
                          &lt;/iframe&gt;
                          &lt;h2&gt;A HEADER&lt;/h2&gt;
                      &lt;/div&gt;
                      &lt;div class="cell"&gt;
                          &lt;iframe width="320" height="215"
                              src="https://www.youtube.com/embed/XGSy3_Czz8k"&gt;
                          &lt;/iframe&gt;
                          &lt;h2&gt;A HEADER&lt;/h2&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;!-- *************************************** GRID SECTION ******************************* --&gt;
          &lt;section class="theGrid"&gt;
              &lt;div class=grid1&gt;
                  &lt;img src="#"&gt;
              &lt;/div&gt;
              &lt;div class="grid2"&gt;
                  &lt;h2&gt;OUR WORK&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus, nisl sed ornare pellentesque, urna nulla dignissim neque, a fermentum ligula ligula vestibulum risus.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="grid3"&gt;
                  &lt;img src="#"&gt; 
              &lt;/div&gt;
              &lt;div class="grid4"&gt;
                  &lt;img src="#"&gt; 
              &lt;/div&gt;
              &lt;div class="grid5"&gt;
                  &lt;img src="#"&gt; 
              &lt;/div&gt;
              &lt;div class="grid6"&gt;
                  &lt;img src="#"&gt; 
              &lt;/div&gt;
              &lt;div class="grid7"&gt;
                  &lt;img src="#"&gt; 
              &lt;/div&gt;
          &lt;/section&gt;
          &lt;!-- *************************************** CONTACT SECTION ******************************* --&gt;
          &lt;div class="contact"&gt;
              &lt;h2&gt;CONTACT US&lt;/h2&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-google-plus"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-youtube"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- *************************************** COPYRIGHT SECTION ******************************* --&gt;
          &lt;footer&gt;
              &lt;p&gt; &amp;copy 2017 HHH CORP&lt;/p&gt;
          &lt;/footer&gt;
          --&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>