how to align div's horizontally in CSS


Tags: css,html5,css3,responsive-design

Problem :

I have three child divs inside a container and I want to align these div's horizontally. I tried using the css float property but the circles are becoming oval.

Markup Code:

 <div class="container info-box clearfix">
   <div class="circle">
     <div class="content">
       <h3>Learn at your own Pace</h3>
    </div>
  </div>
  <div class="circle">
    <div class="content">
      <h3>Methodic learning</h3>
    </div>
  </div>
  <div class="circle">
    <div class="content">
      <h3>Unique Approach</h3>
    </div>
  </div>
</div>     

CSS:

.circle {
  position: relative;
  background-color: #3cb371;
  border-radius: 50%;
  padding: 5px 10px;
  width: 20%;
}

.content {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: auto;
}

.circle:before {
  content: '';
  display: block;
  margin-top: 100%; /* 1:1 ratio */
}

.clearfix:before, .clearfix:after{
  content: " ";
  display: table;
}

.clearfix:after{
  clear: both
}

.info-box{
  margin-top: 20px;
  width:100%;
}

.container{
  margin-left: auto;
  margin-right: auto;
  padding-left:15px;
  padding-right:15px;
  text-align:center;
}

*{
   box-sizing: border-box;
 }

I tried using the float property but the circles are turning into oval. Please let me know where I am going wrong.

Code on jsfiddle: jsfiddle



Solution :

Circles are becoming oval because of padding property you have applied. just remove padding: 5px 10px; and add float:left; in the circle class.

.circle {
    position: relative;
    background-color: #3cb371;
    border-radius: 50%;
    float: left;
    width: 20%;
}

    CSS Howto..

    div content shows when display:none

    How to proper align after CSS column-count

    How to make a graphic image responsive in css

    Cutting out the middle portion of an image (example shown)?

    How to edit CSS file in Objective-C

    How to have one div overlap two other divs?

    How to dynamically scale images per height using pure CSS?

    How to adjust the top of an image and an input in the same line?

    How can I programmatically (in JavaScript) add “sub-divs” to divs?

    How to place background image behind page content?

    how to make css submenu stay put when subpage has been selected

    How to force Visual Studio to honor the BOM at the start of a UTF-8 encoded CSS file?

    How to animate two divs in html / css to make a semi-circle transition?

    How is the force reload of javascript/css done in Symfony?

    How a checkbox will trigger another input element in html via javascript?

    2 divs aligned side by side, how to make right div fill width 100%?

    How do I make link the highlight link conform to CSS shape

    How to use external css file to style a javafx application

    How to remove all CSS attributes in this situation

    How to fix
      's in footer that break in ie8 & ie9, but is perfect in ie7, FF, Safari & Chrome

    How to make a Facebook-image-style web design using CSS3?

    How to make this table's height equal to the middle td's height

    How to make text appears alitter above using html and css

    How to change url of image which is generated dynamically just by using CSS and media queries?

    Looping through my table, how do I know if the checkbox is checked?

    How to position div underneath dynamic ul

    How to align nav bar to bottom of window with no gap between buttons and window edge

    How to set css via jquery for preventing some action

    How to target a specific browser of a specific device via CSS?

    How to add a color overlay to a background image?