How to put <img> exactly under another <img> in html? - html

Question

I want to put two images on the left and a table on the right. At the moment I have one picture on the left, a table on the right and a blank space in the place where I want my another <img>. When I try to put my second <img> it remains on the left but under the table as it is 2x longer than the first image. Here's my code:
th { color: white; padding: 10px; }
td { color: white; padding: 10px; border-bottom: 1px solid aqua; }
tr { opacity: 0.8; }
tr:hover {background-color: #72FFBB;}
#td {
opacity: 0.2;
}
.table{
height: 654px;
float: left;
width: 55%;
border: 2px solid aqua;
text-align:center;
}
<!-- first picture -->
<div> <img id="VY_Canis_Majoris_vs_sun" src="VY_Canis_Majoris_vs_sun.png" width="44%" height="50%" style= "float: left;"> </div>
<!-- the one that should be under the first picture, but it is next to it -->
<div> <img id="VY_Canis_Majoris_vs_sun" src="Sol_VY_Canis_Majoris.png" width="44%" height="50%" style="z-index: -1;"> </div>
<div class="table"> <table width="100%" height="100%">
<tr>
<td>text</td>
<td> text</td>
</tr>
<tr>
<td>Mass</td>
<td>8 solar mass units </td>
</tr>
<tr>
<td>Radius</td>
<td>1,708 ± 192 R☉</td>
</tr>
<tr>
<td>Luminosity</td>
<td>340,000 L☉</td>
</tr>
<tr>
<td>Surface gravity</td>
<td>Surface gravity (log g) −0.5 cgs</td>
</tr>
<tr>
<td>Temperature</td>
<td>3,365±134 K</td>
</tr>
</table> </div>

Answer 1

Enclose the two pictures in one div
<div class="myimg">
<!-- first picture -->
<img id="VY_Canis_Majoris_vs_sun" src="VY_Canis_Majoris_vs_sun.png" width="44%" height="50%" style= "float: left;">
<!-- the one that should be under the first picture, but it is next to it -->
<img id="VY_Canis_Majoris_vs_sun" src="Sol_VY_Canis_Majoris.png" width="44%" height="50%" style="z-index: -1;"> </div>
<div class="table"> <table width="100%" height="100%">
<tr>
<td>text</td>
<td> text</td>
</tr>
<tr>
<td>Mass</td>
<td>8 solar mass units </td>
</tr>
<tr>
<td>Radius</td>
<td>1,708 ± 192 R☉</td>
</tr>
<tr>
<td>Luminosity</td>
<td>340,000 L☉</td>
</tr>
<tr>
<td>Surface gravity</td>
<td>Surface gravity (log g) −0.5 cgs</td>
</tr>
<tr>
<td>Temperature</td>
<td>3,365±134 K</td>
</tr>
</table> </div>
then add this css
.myimg{
float: left;
width: 44%;
}

Answer 2

give float:left to both image div tag.
th { color: white; padding: 10px; }
td { color: white; padding: 10px; border-bottom: 1px solid aqua; }
tr { opacity: 0.8; }
tr:hover {background-color: #72FFBB;}
.d1{
float:left;
height:100px;
width:100px;
}
#td {
opacity: 0.2;
}
.table{
height: 654px;
float: left;
width: 55%;
border: 2px solid aqua;
text-align:center;
}
<!-- first picture -->
<div class="d1"> <img id="VY_Canis_Majoris_vs_sun" src="VY_Canis_Majoris_vs_sun.png" width="44%" height="50%" style= "float: left;"> </div>
<!-- the one that should be under the first picture, but it is next to it -->
<div class="d1"> <img id="VY_Canis_Majoris_vs_sun" src="Sol_VY_Canis_Majoris.png" width="44%" height="50%" style="z-index: -1;"> </div>
<div class="table"> <table width="100%" height="100%">
<tr>
<td>text</td>
<td> text</td>
</tr>
<tr>
<td>Mass</td>
<td>8 solar mass units </td>
</tr>
<tr>
<td>Radius</td>
<td>1,708 ± 192 R☉</td>
</tr>
<tr>
<td>Luminosity</td>
<td>340,000 L☉</td>
</tr>
<tr>
<td>Surface gravity</td>
<td>Surface gravity (log g) −0.5 cgs</td>
</tr>
<tr>
<td>Temperature</td>
<td>3,365±134 K</td>
</tr>
</table> </div>

Answer 3

Maybe what you are looking for:
.container,
.images-container {
display: flex;
}
.container {
flex-direction: row;
}
.images-container,.table-container {
width:50%;
}
.images-container {
flex-direction: column;
}
.images-container img{
max-width:100%;
height:200px;
object-fit:cover;
}
/* Table styling */
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
<div class='container'>
<div class='images-container'>
<img src="http://ste.india.com/sites/default/files/2016/12/30/559004-301216-gs-tch-10.jpg" />
<img src="http://www.dailypioneer.com/uploads/main/mn_story_image/T330_158723_Untitled-2.gif" />
</div>
<div class='table-container'>
<table id='t01' style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
</div>

Answer 4

You can group your images into 1 div and float this to the left.
<div id="pictures">
<img id="VY_Canis_Majoris_vs_sun" src="https://picsum.photos/400/400">
<img id="VY_Canis_Majoris_vs_sun" src="https://picsum.photos/400/400?image=42">
</div>
In your css you can give this div a width of 50% (and float it)
#pictures {
width: 50%;
float: left;
}
If you want your pictures under each other you can put display block on the images and make them fill the space (width: 100%)
#pictures img {
display: block;
width: 100%;
height: auto;
}
You put a border on your table so to make it fit you can put the width on 50% - 4px (2px border on each side). Use calc (short for calculate) for this:
.table {
width: calc(50% - 4px);
...
}
Here you can find all the code together: https://jsbin.com/rejuburaka/edit?html,css,output

Answer 5

Try This:
th {
color: white; padding: 10px;
}
td {
color: white;
padding: 10px;
border-bottom: 1px solid aqua;
}
tr {
opacity: 0.8;
}
tr:hover {
background-color: #72FFBB;
}
#td {
opacity: 0.2;
}
.table{
height: 654px;
float: left;
width: 55%;
border: 2px solid aqua;
text-align:center;
}
.wrapper {
float: left;
width: 30%;
}
div img {
width: 100%;
margin-bottom: 5px;
}
.table {
float: right;
width: 65%;
}
<div class="wrapper">
<div>
<img id="VY_Canis_Majoris_vs_sun" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" width="44%" height="50%">
</div>
<div>
<img id="VY_Canis_Majoris_vs_sun" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA" width="44%" height="50%" style="z-index: -1;">
</div>
</div>
<div class="table">
<table width="100%" height="100%">
<tr>
<td>text</td>
<td> text</td>
</tr>
<tr>
<td>Mass</td>
<td>8 solar mass units </td>
</tr>
<tr>
<td>Radius</td>
<td>1,708 ± 192 R☉</td>
</tr>
<tr>
<td>Luminosity</td>
<td>340,000 L☉</td>
</tr>
<tr>
<td>Surface gravity</td>
<td>Surface gravity (log g) −0.5 cgs</td>
</tr>
<tr>
<td>Temperature</td>
<td>3,365±134 K</td>
</tr>
</table>
</div>

Answer 6

I think you can't use <img /> tag under another <img /> tag because <img /> is a single line html tag. You can do something like this
<style>
.full-div{
width: 100%;
height: auto;
margin: 0 auto;
}
.left-side{
width: 100%;
height: auto;
margin: 0 auto;
}
.first-div,.second-div,.third-div{
width: 33%;
height: auto;
margin: 0 auto;
}
</style>
<div class="full-div">
<div class="left-side">
<div class="first-div">
<img src="your image source" />
</div>
<div class="second-div">
<img src="your image source" />
</div>
<div class="third-div">
<img src="your image source" />
</div>
</div>
<div class="right-side">
your table here
</div>
</div>