Stew Stew - 1 month ago 10
CSS Question

Move a table next to an image

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

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/

Comments