CODEWITHSUNDEEP
htmlcsscss-position
ramers47
ramers47

Reputation: 5

I'm having trouble aligning my table with an embedded video in html/css

My table is positioned on the extreme bottom left of my page, but I want it on the left of an embedded video since there is plenty of empty space there. I can't figure out why it won't go there.

I've tried adding in float: left; in a div on the table, but that just made it worse. Other than that, I have no clue what to try.

<iframe class="rightv" width="703" height="395" style="padding:1px; margin-top: 20px; border:10px solid black;" alt="playstyle" src="https://www.youtube.com/embed/-bK3OlP3eSE" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

<div>
  <h2>Types of Decks</h2>

  <table>
    . . .
  </table>
</div>

Upvotes: 0

Views: 59

Answers (2)

Esger
Esger

Reputation: 1417

A possibility is positioning your table absolute next to the iframe.

table {
    position: absolute;
    left: 0;
    top: 20px;
}

Upvotes: 0

Harsha Venkataramu
Harsha Venkataramu

Reputation: 2914

Try This. 

.flex-container {
  display: flex;
}
<div class="flex-container">
  <div>           
    <h2>Types of Decks</h2>

    <table>
      <tr>
        <td>First Column</td>
        <td>Second Column</td>
        <td>Third Column</td>
        <td>Fourth Column</td>
      </tr>
    </table>
  </div>

  <iframe class = "rightv" height="395" style="padding:1px; margin-top: 20px; border:10px solid black;" alt = "playstyle" src="https://www.youtube.com/embed/-bK3OlP3eSE" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Upvotes: 1

Related Questions