Centering object below 2 floating ones

Question

I was trying to make an interesting element on my website. I was trying to have 2 circles overlapping their parent element and 1 overlapping but below. Like 2 are overlapping above and 1 is overlapping below.

I tried float left and float right but I don´t know how to deal with the 3 one. I could make 3 inline(in example).

Does anyone know how to make 2 inline and the 3rd one in center below them?

I hope you will understand me... it is pretty hard to describe.

#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>

Answer 1

Is this what you are trying to achieve, please take a look

#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: block;
width: 100px;
margin-right: 10%;
position: absolute;
bottom: 100%;
}
.kolecka:last-child{
	margin-right: 0;
    right: 0;
}
.kolecka:nth-child(2){
  margin: 0 auto;
  position: relative;
  top: 100%;
}

<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>