CODEWITHSUNDEEP
html
Mārcis B
Mārcis B

Reputation: 15

How to add a picture next to a table?

<style>

table.greyGridTable {
  border: 2px solid #2196F3;
  width: 50%;
  text-align: center;
  border-collapse: collapse;
  font-family: 'Times New Roman', Times, serif, Helvetica, sans-serif;
}
table.greyGridTable td, table.greyGridTable th {
  border: 1px solid #FFFFFF;
  padding: 3px 4px;
}
table.greyGridTable tbody td {
  text-align: left;
  font-size: 25px;
}
table.greyGridTable td:nth-child(even) {
  background:  #2196F3;
}
table.greyGridTable thead {
  background: #2196F3;
  border-bottom: 4px solid #333333;
}
table.greyGridTable thead th {
  font-size: 30px;
  font-weight: bold;
  color: #333333;
  text-align: center;
  border-left: 2px solid #333333;
}
table.greyGridTable thead th:first-child {
  border-left: none;
}

table.greyGridTable tfoot {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  border-top: 4px solid #333333;
  background:  #2196F3 ;
}
table.greyGridTable tfoot td {
  font-size: 14px;
}

</style>
<style>
.Pa_Kreisi {
    float: left;
    width: 100%;
    height: top;
}
.Pa_Labi {
    float: right;
    width: 100%;
    height: top;
}
</style>

<div class="Pa_Kreisi">
    <table class="greyGridTable">
    <thead>
    <tr>
    <th>Atsēgas vārdi kurus meklēt mūsu mājas lapā:</th>

    </tr>
    </thead>
    <tfoot>
    <tr>
    <td>Meklēt iespējams caur logu lapas augšējā, labajā stūrī!</td>


    </tr>
    </tfoot>
    <tbody>
    <tr>
    <td>Komercprogrammatūra</td>


    </tr>
    <tr>
    <td>Izplatāmprogrammatūra</td>


    </tr>
    <tr>
    <td>Brīvprogrammatūra</td>


    </tr>
    <tr>
    <td>Bezmaksas programmatūra</td>
    </tr>


    </tr>
    </tbody>
    </table>
</div>
<div class="Pa_Labi">

    <img src="snow-run-final.jpg">

</div>

Don't mind the text in the table. How do you put the picture next to the table at the top of the website? I tried it with float, but it didn't work... maybe i made a mistake? Any help appreciated.

For some reason this website want's me to add more details to the question, so ill tell you about myself. I am 18 years old from Latvia, just started to learn how to code, and i am doing a homework for school right now. Since i want it to look pleasing as well, not just tick all the boxes teacher asked us to do, i am hereby asking for your help.

Upvotes: 1

Views: 91

Answers (2)

Daemon Beast
Daemon Beast

Reputation: 2909

You were setting the width to 100%, so the divs will take up the whole width. You need to set the width to 50% or possibly smaller, so that both divs can fit side by side. Also, div elements by default are block elements, which means that they take up the whole width, which can be solved using display: inline-block.

<style>
.Pa_Kreisi {
    display: inline-block;
    width: 50%;
    height: top;
}

.Pa_Labi {
    display: inline-block;
    width: 50%;
    height: top;
}
</style>

Alternatively, you can use float. In your question, you set one div to float: left and the other div to float: right, when they should ideally both be float: left.

<style>
.Pa_Kreisi {
    float: left;
    width: 50%;
    height: top;
}

.Pa_Labi {
    float: left;
    width: 50%;
    height: top;
}
</style>

As a side note, you are setting height: top, which is not valid.

Upvotes: 0

Julie Xiong
Julie Xiong

Reputation: 150

You can use flexbox to align the table and img next to each other.

<style>
  .align-next-to-each-other {
    display: flex;
  }
</style>

<div class="align-next-to-each-other">
  <div class="Pa_Kreisi">
    <table class="greyGridTable">
      ...
    </table>
  </div>
  <div class="Pa_Labi">
    <img src="snow-run-final.jpg">
  </div>
</div>

Upvotes: 2

Related Questions