CODEWITHSUNDEEP
csscss-position
l2Code
l2Code

Reputation: 13

Elements and Text CSS3 Positioning

I am new to CSS and I have struggle with every horizontal positioning of different elements. I am trying to position 3 elements on a same line with text paragraph as shown on the picture. Any suggestions ?

enter image description here

.planning {
  position: relative;
  top: 20px;
}
.circle1,
.circle2,
.circle3 {
  width: 43px;
  height: 43px;
  background-color: #add136;
  border-radius: 25px;
  display: inline-block;
}
.circle1 {
  float: left;
}
.circle2 {
  text-align: center;
}
.circle3 {
  float: right;
}
<div class="planning">
  <div class="circle1">
    <p>Simple</p>
  </div>
  <div class="circle2">
    <p>Transparent</p>
  </div>
  <div class="circle3">
    <p>Collaborative</p>
  </div>
</div>

Upvotes: 1

Views: 52

Answers (1)

A1Gard
A1Gard

Reputation: 4168

change your css to this:

.planning{

    position: relative;
    top: 20px;
}

.planning div{
    display:inline-block;
    width:33%;
    text-align:center;
    position: relative;
    border-bottom:1px solid silver;
    padding-bottom:15px;
}
.planning div:hover{
    border-bottom: 1px solid #88be14;
}

.planning div:before{
    background: silver ;
    border-radius:50%;
    color:white;
    position:absolute;
    left:10px;
    width: 43px;
    height: 43px;
    padding:10px;
    font-size:15pt;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing:border-box;
}

.planning div:hover:before{
    background: #88be14 ;
}

.circle1:before{
    content:"1";
}

.circle2:before{
    content:"2";
}

.circle3:before{
    content:"3";
}

edited sample:

https://jsfiddle.net/zu86kgrr/4/

Upvotes: 1

Related Questions