Morgan Clarke Morgan Clarke - 7 months ago 7
HTML Question

Align images and div horizontal

I have some code that will show 5 'cards'. But, when they are shown they are all messed up and not in a straight line (which is what I want). I have tried to vertically align them and I have managed to get it so they are in a straight line it's just that some are higher and in the wrong places. Image for reference I want it to look kinda like this

HTML

<main>
<center>
<button class="open" id="conferm" onclick="opencards()">Open Cards.</button>
<br />
<img class="card" src="images/blank.png" id="canvas" />
<div class="attatch">
<div class="stats">Dammage: <span id="s1"></span></div>
<div class="stats">Health: <span id="s2"></span></div>
<div class="stats">Worth: <span id="s3"></span></div>
<div class="stats">Intelligence: <span id="s4"></span></div>
</div>
<img class="card" src="images/blank.png" id="canvas1" />
<div class="attatch">
<div class="stats">Dammage: <span id="s5"></span></div>
<div class="stats">Health: <span id="s6"></span></div>
<div class="stats">Worth: <span id="s7"></span></div>
<div class="stats">Intelligence: <span id="s8"></span></div>
</div>
<img class="card" src="images/blank.png" id="canvas2" />
<div class="attatch">
<div class="stats">Dammage: <span id="s9"></span></div>
<div class="stats">Health: <span id="s10"></span></div>
<div class="stats">Worth: <span id="s11"></span></div>
<div class="stats">Intelligence: <span id="s12"></span></div>
</div>
<img class="card" src="images/blank.png" id="canvas3" />
<div class="attatch">
<div class="stats">Dammage: <span id="s13"></span></div>
<div class="stats">Health: <span id="s14"></span></div>
<div class="stats">Worth: <span id="s15"></span></div>
<div class="stats">Intelligence: <span id="s16"></span></div>
</div>
<img class="card" src="images/blank.png" id="canvas4" />
<div class="attatch">
<div class="stats">Dammage: <span id="s17"></span></div>
<div class="stats">Health: <span id="s18"></span></div>
<div class="stats">Worth: <span id="s19"></span></div>
<div class="stats">Intelligence: <span id="s20"></span></div>
</div>
</center>
</main>


JAVASCRIPT

var cards = new Array("images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png","images/6.png", "images/7.png", "images/8.png", "images/9.png");

function opencards(){
var pc = document.getElementById("packprice").innerHTML;
var cc = document.getElementById("cash").innerHTML;
var cash = Number(cc) + 50;
var cardnum = Math.floor(Math.random() * cards.length);
var s1 = Math.floor(Math.random() * 100);
var s2 = Math.floor(Math.random() * 100);
var s3 = Math.floor(Math.random() * 100);
var s4 = Math.floor(Math.random() * 100);
var s5 = Math.floor(Math.random() * 100);
var s6 = Math.floor(Math.random() * 100);
var s7 = Math.floor(Math.random() * 100);
var s8 = Math.floor(Math.random() * 100);
var s9 = Math.floor(Math.random() * 100);
var s10 = Math.floor(Math.random() * 100);
var s11 = Math.floor(Math.random() * 100);
var s12 = Math.floor(Math.random() * 100);
var s13 = Math.floor(Math.random() * 100);
var s14 = Math.floor(Math.random() * 100);
var s15 = Math.floor(Math.random() * 100);
var s16 = Math.floor(Math.random() * 100);
var s17 = Math.floor(Math.random() * 100);
var s18 = Math.floor(Math.random() * 100);
var s19 = Math.floor(Math.random() * 100);
var s20 = Math.floor(Math.random() * 100);
document.getElementById("canvas").src = cards[cardnum];
document.getElementById("s1").innerHTML = s1;
document.getElementById("s2").innerHTML = s2;
document.getElementById("s3").innerHTML = s3;
document.getElementById("s4").innerHTML = s4;
document.getElementById("canvas1").src = cards[cardnum];
document.getElementById("s5").innerHTML = s5;
document.getElementById("s6").innerHTML = s6;
document.getElementById("s7").innerHTML = s7;
document.getElementById("s8").innerHTML = s8;
document.getElementById("canvas2").src = cards[cardnum];
document.getElementById("s9").innerHTML = s9;
document.getElementById("s10").innerHTML = s10;
document.getElementById("s11").innerHTML = s11;
document.getElementById("s12").innerHTML = s12;
document.getElementById("canvas3").src = cards[cardnum];
document.getElementById("s13").innerHTML = s13;
document.getElementById("s14").innerHTML = s14;
document.getElementById("s15").innerHTML = s15;
document.getElementById("s16").innerHTML = s16;
document.getElementById("canvas4").src = cards[cardnum];
document.getElementById("s17").innerHTML = s17;
document.getElementById("s18").innerHTML = s18;
document.getElementById("s19").innerHTML = s19;
document.getElementById("s20").innerHTML = s20;
document.getElementById("cash").innerHTML = cash;
};


CSS

.card{
margin-top: 50px;
height: 300px;
width: 200px;
float: left;
}
.stats{
vertical-align: middle;
}
.attatch{
float: left;
width: 200px;
height: 72px;
border: 2px solid black;
}

Answer

First of all, instead of align cards and their attachments seperately group them together.

 <div class =card-group>
     <img class="card" src="images/blank.png" id="canvas" />
        <div class="attatch">
           <div class="stats">Dammage: <span id="s1"></span></div>
           <div class="stats">Health: <span id="s2"></span></div>
           <div class="stats">Worth: <span id="s3"></span></div>
           <div class="stats">Intelligence: <span id="s4"></span</div>
        </div>
 </div>

Then align those groups

.card-group {
  float: left;
  margin: 10px;
}

Don't forget to remove previous aligns from your code

.card{
    margin-top: 50px; // remove
    float: left;      // remove
}

.attatch{
    float: left;      // remove
}

Take a look at this working example