Move a table next to an image - html

Question

This is how my webpage looks:
-------------
-------------
Image here
-------------
-------------
Table1 here
Table2 here
Table3 here
I was hoping to make it look like this:
-------------
-------------
Image here Table1 here
-------------
-------------
Table2 here Table3 here
HTML:
<img class="image" src="somesrc">
<table id="table-1">
<tbody>
<tr class="row-1">
<td class="column-1">something</td><td class="column-2">something</td>
</tr>
<tr class="row-2">
<td class="column-1">something</td><td class="column-2">something</td>
</tr>
The same for the other 2 tables but with different ID
CSS:
.image {
height: auto;
width: 250px;
}
#table-1, #table-2, #table-3 {
width: 40%;
font-weight: bold;
}
#table-1 .column-1, #table-2 .column-1, #table-3 .column-1 {
background-color: #000000;
color: #fff;
width: 40%;
}
I have no idea how to move table1 to the desired position. Each table has a heading above it too.

Answer 1

Try this code:
<div class="image">
<img src="somesrc">
</div>
<table id="table-1">
<tbody>
<tr class="row-1">
<td class="column-1">something</td><td class="column-2">something</td>
</tr>
<tr class="row-2">
<td class="column-1">something</td><td class="column-2">something</td>
</tr>
CSS:
.image {
height: auto;
width: 250px;
float:right;
}
#table-1, #table-2, #table-3 {
width: 40%;
font-weight: bold;
}
#table-1 .column-1, #table-2 .column-1, #table-3 .column-1 {
background-color: #000000;
color: #fff;
width: 40%;
float:left;
}
I added a div with the class image and deleted the class in <img> then i just added a float:right to that div. and a float:left to the table. Check the fiddle: https://jsfiddle.net/amsuh474/2/

Answer 2

You need to float your elements. Sample below.
table {
width: 40%;
margin: 10px;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
.image {
height: 100px;
border: 1px solid;
margin: 10px;
width: 40%;
}
.pull-left {
float: left;
}
.clearfix {
clear: both;
}
<div class="image pull-left">IMAGE</div>
<table class="pull-left">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div class="clearfix"></div>
<table class="pull-left">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<table class="pull-left">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Answer 3

I'm not 100% sure how the visual spacing between the image and the table should be vs the two tables below but I'm going to give you an example using a grid to layout page elements. You can roll your own or use a grid from any number of CSS frameworks like Bootstrap, Skeleton, Foundation etc.
* {
box-sizing: border-box;
}
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
.row {
margin-left: -10px;
margin-right: -10px;
overflow: hidden; /* cheap clearfix - should use: http://nicolasgallagher.com/micro-clearfix-hack/ */
}
[class^="col-"] {
float: left;
padding-left: 10px;
padding-right: 10px;
}
.col-half {
width: 50%;
}
<div class="row">
<div class="col-half">
<img src="http://placehold.it/250x175/ffcc00/?text=example">
</div>
<div class="col-half">
<h2>Table 1</h2>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-half">
<h2>Table 2</h2>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
<div class="col-half">
<h2>Table 3</h2>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
</div>

Answer 4

Wrap the image and a table in an element (in the example it's <section>) and the remaining 2 tables in another block element(section>). Then wrap everything in another element (<main>). Apply display: table-* CSS properties to each as the Snippet demonstrates.
#main {
display: table;
table-layout: fixed;
width: 100vw;
height: 100vh;
}
section {
display: table-row;
}
figure,
table {
width: 50%;
height: 100%;
display: table-cell;
border: 2px dashed red;
}
td {
width: 25%;
border: 1px solid black;
}
img {
max-width: 100%;
margin-bottom: calc(50% - 25vh);
}
figcaption {
text-align: center;
margin: 0 0 5px 0;
border: 1px solid blue;
}
<main id='main'>
<section>
<figure>
<figcaption>IMAGE</figcaption>
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
</figure>
<table>
<caption>TABLE1</caption>
<tbody>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
<td>Tables will stretch with their content accordingly.</td>
</tr>
<tr>
<td>TD</td>
<td>This content is added just to fill out the rest of the dead space.</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td>This content is added just to fill out the rest of the dead space.</td>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
</tbody>
</table>
</section>
<section>
<table>
<caption>TABLE2</caption>
<tbody>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
<td>This content is added just to fill out the rest of the dead space.</td>
</tr>
<tr>
<td>TD</td>
<td>The maximum width of each table is 50% of viewport</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td>This content is added just to fill out the rest of the dead space.</td>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
</tbody>
</table>
<table>
<caption>TABLE3</caption>
<tbody>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
<td>This content is added just to fill out the rest of the dead space.</td>
</tr>
<tr>
<td>TD</td>
<td>This content is added just to fill out the rest of the dead space.</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
<td>This content is added just to fill out the rest of the dead space.</td>
</tr>
</tbody>
</table>
</section>
</main>