How do I align 3 circular images?

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.

Also, totally irrelevant to the question, but an important thing to keep in mind is that in CSS, all prefixed properties should be *before* the un-prefixed property (in this case the webkit and moz prefixes of `border-radius` should come before). — Tejasvi Karne, Jul 05 '17 at 19:00
Thanks - I have switched them around but still getting a couple of errors - have updated question with new code + errors — Bob, Jul 05 '17 at 19:46

Vanity Slug - codidact.com · Answer 1 · 2017-07-05T20:22:16.503

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>

I have updated question with my current code and problem - any ideas? — Bob, Jul 05 '17 at 19:45

score 0 · Answer 2 · answered Jul 05 '17 at 20:11

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>

How do I align 3 circular images?

2 Answers2