Trying to create a visually interesting element on my website with 2 circles overlapping their parent element and 1 overlapping below. How can I make the third one centered below the first two?
I've experimented with float left and right, but not sure how to handle the third circle. Maybe positioning them inline will work best.
If anyone has tips on making 2 circles align horizontally and the third centered below, please share!
Hope that makes sense, it's tricky to explain.
#bile{
background: white;
width: 100%;
height: 150px;
}
.kolecko{
position: absolute;
top: -10%;
display: table;
width: 100px;
height: 100px;
border-radius: 50%;
background: gray;
border: 1px solid black;
box-shadow: inset 0 0 20px #000;
}
.kolecko:hover{
box-shadow: inset 0 0 20px #fff;
}
.popisek{
vertical-align: middle;
text-align: center;
display: table-cell;
font-size: 15px;
}
.popisek:hover{
color: blue;
}
.obal{
display: inline-flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
#rude{
width: 100%;
position: relative;
height: 250px;
background: #720000;
padding: 0 15%;
}
.kolecka{
display: inline-block;
width: 100px;
margin-right: 10%;
}
.kolecka:last-child{
margin-right: 0;
}<section id="bile"></section>
<section id="rude">
<div class="kolecka">
<div class="obal">
<div class="kolecko">
<div class="popisek">WWW</div>
</div>
</div>
</div>
<div class="kolecka">
<div class="obal">
<div class="kolecko">
<div class="popisek">abs</div>
</div>
</div>
</div>
<div class="kolecka">
<div class="obal">
<div class="kolecko" style="float: right;">
<div class="popisek">123</div>
</div>
</div>
</div>
</section>