Laying out Images in HTML - html

Question

I'm super bad/newb when it comes to HTML/CSS so this is probably super easy. How do you layout four images like this? -
I'm using four div tags right now to do it (or shall I say attempt?).
div.imageBlockA {
float: top;
float: left;
}
div.imageBlockB {
float: top;
float: right;
}
div.imageBlockC {
float: bottom;
float: left;
}
div.imageBlockD {
float: bottom;
float: right;
}
Thanks!

Answer 1

Without seeing your layout, try the following:
.image {
width: 50%;
float: left;
box-sizing: border-box;
padding: 10px;
}
.image img {
max-width: 100%;
border: 2px solid red;
display: block;
margin: 0 auto;
}
<div class="image">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
<div class="image">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
<div class="image">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
<div class="image">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
You'll need to add some more styling to make it look the way you want, but there's one way of achieving a basic layout that you're describing.
As rightfully pointed out in comment below, try also adding box-sizing: border-box so you can safely add padding / border to the outer div element without worrying about the extra width / height it will add (possibly breaking the layout by making the next image go to the next line as the width will then be over 50%).
EDIT - forgot to mention and as #Paulie_D pointed out in comments on your question, there isn't a top or bottom value for the float property.

Answer 2

table {
width: 100%;
}
td {
text-align: center;
}
.image {
background-color: lightblue;
width: 80%;
height: 40px;
}
<table>
<tr>
<td>
<p class="image">IMAGE</p>
</td>
<td>
<p class="image">IMAGE</p>
</td>
</tr>
<tr>
<td>
<p class="image">IMAGE</p>
</td>
<td>
<p class="image">IMAGE</p>
</td>
</tr>
</table>
Regardless of what some people may say, I find that using the table tag along with separate table rows and fields reduces the amount of work that you have to do when doing layouts. You may not agree with this method, but it's often useful - especially when starting out with HTML and CSS.

Answer 3

Another way would be
body {
text-align: center;
}
.image {
display: inline-block;
width: 49%;
}
<div class="image">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
<div class="image">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
<div class="image">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
<div class="image">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
this uses text-align: center; and in some cases is this more flexible.