I have the following HTML code:
<div class="book">
<div class="book-image">
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $books->Image ).'"height="180" width="130">'; ?>
</div>
<div class="book-values">
<span><label for="ISBN">ISBN:</label> <?php echo $books->ISBN;?></span><br>
<span><label for="title">Title:</label><?php echo $books->Title;?></span><br>
<span><label for="author's name">Author's name:</label><?php echo $books->Authorsname;?></span><br>
<span><label for="edition">Edition:</label><?php echo $books->edition;?></span><br>
<span><label for="year">Year:</label><?php echo $books->year;?></span><br>
<span><label for="category">Category:</label><?php echo $books->category;?></span><br>
<span><label for="publisher">Publisher:</label><?php echo $books->publisher;?></span><br>
<span><label for="quantity">Quantity-in-stock:</label><?php echo $books->quantityinstock;?></span><br>
<span><label for="price">Price:</label><?php echo $books->price;?></span><br>
<span><a href="shoppingcart.php?ISBN=<?php echo $books->ISBN; ?>">Order Now</a></span>
</div>
</div>
</div>
In CSS:
.book{
float: left;
margin-top: 10px;
margin-bottom: 20px;
}
.book-image{
margin-bottom: 20px;
float: left;
width: 20%;
height: 150px;
text-align:center;
}
.book-values{
padding-left:20px;
float: right;
display: block;
}
However the images are not aligned (see photo). I need to align to make it better at the aesthetic level