How do I align 3 circular images? - html

Question

So I have this code:
/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
width: 200px;
height: 200px;
background-size: cover;
display: block;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
float: left;
background: red;
}
.img-circular1{
background-image: url('/Images/learn.jpg');
}
.img-circular2{
background-image: url('/Images/watch.jpg');
}
.img-circular3{
background-image: url('/Images/practice.jpg');
}
#container1
{
top: 100px;
position: relative;
margin-left:auto;
margin-right:auto;
width:70%;
background-color: green;
overflow: auto;
bottom: 0;
}
<div id="container1" style="padding-bottom: 500px;">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
<div class="img-circular1"></div>
</div>
I have no managed to get 2 of them to show in a green box. But the third (which I duplicated before and after the other 2) will not show for some reason?
Also, they are not equidistant apart - how can I get them an equal spacing apart?
Please help
NOTE: Instead of images there are red circles, just for visibility reasons.

Answer 1

Apply float: left on images themself, not on container:
/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
/*width: 200px;*/
/*height: 200px;*/
width: 100px;
height: 100px;
background-size: cover;
display: block;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
float: left;
}
.img-circular1{
background-image: url('/Imageslearn.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.img-circular2{
background-image: url('/Images/watch.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.img-circular3{
background-image: url('/Images/practice.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.container1{
left: 15%;
width: 70%;
/* float: left; */
height: 300px;
position: relative;
}
<div class="container1">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
</div>
To answer your second question:
wrap circles in some other div
make their width be some percentage value and float them left
set margin on circles to margin: 0 auto.
Here is prototype for you to study:
#green {
background: green;
padding: 10px;
overflow: auto;
}
#blue {
background: blue;
width: 50%;
float: left;
border: 1px solid #fff;
box-sizing: border-box; /*good for when there is border or padding*/
}
#red {
background: red;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
<div id="green">
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
</div>

Answer 2

I updated your code to use FlexBox. Since you want your circles to be equally spaced across the row, float: left won't help much. I had to add a wrapper div around each circle div so that it could expand to fill the space without distorting the circles.
/*--- Circular images --- */
.img-circular1,
.img-circular2,
.img-circular3 {
width: 200px;
height: 200px;
background-size: cover;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
background: red;
display: block;
margin: 0 auto;
}
.img-circular1 {
background-image: url('/Images/learn.jpg');
}
.img-circular2 {
background-image: url('/Images/watch.jpg');
}
.img-circular3 {
background-image: url('/Images/practice.jpg');
}
#container1 {
top: 100px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: green;
overflow: auto;
bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrap {
flex-grow: 1;
}
<div id="container1" style="padding-bottom: 500px;">
<div class="wrap">
<div class="img-circular1"></div>
</div>
<div class="wrap">
<div class="img-circular2"></div>
</div>
<div class="wrap">
<div class="img-circular3"></div>
</div>
<div class="wrap">
<div class="img-circular1"></div>
</div>
</div>