Horizontal block alignment in CSS - html

Question

I am learning to bear with me.
I want to have 3 separate blocks within a container, and through css have them inlined, for example
the html (rough idea)
<div class="content-container">
<div class="block1">
<img scr="blockimage1" />
</div>
<div class="block2">
<img scr="blockimage2" />
</div>
<div class="block3">
<img scr="blockimage3" />
</div>
</div>
the css (rough idea)
.content-containter
{
width:1500px;
margin:40px auto 0 auto;
padding:10px;
}
.block1
{
width:500px;
float:left;
}
.block2
{
width:500px;
float:center;
}
.block3
{
width:500px;
float:right;
}
What's happening to me is they are just all aligning vertically below each other. Not next to each other in a horizontal line. I've tried many things and the closest I got was making a grid system with bootstrap but I ran issues with that later on so I thought I'd try a new approach.

Answer 1

You need to clean your HTML, CSS and use a simple solution. View the result in full screen. Display the blocks in a line using display: inline-block
.content-containter
{
width:1500px;
margin:40px auto 0 auto;
padding:10px;
}
.block {
display: inline-block;
}
<div class="content-container">
<div class="block">
<img src="http://placehold.it/500x500" />
</div>
<div class="block">
<img src="http://placehold.it/500x500" />
</div>
<div class="block">
<img src="http://placehold.it/500x500" />
</div>
</div>