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

    How to activate a CSS property according to a variation in PHP code or URL direction?

    how to move button to left

    how to trigger “onMouseOut” from click

    How to set absolute css path as in jsp

    How to apply css for anchor tag inside table

    How to change CSS color values in real-time off a javascript slider?

    How do I spilt the footer into different widths?

    How do I make template colors update when I choose them from a list or radio buttons? [closed]

    HTML5 contenteditable div: show placeholder only if div has 1 child

    How can I delete this “a” space under the images using CSS?

    Make nav dropdown show above all other divs

    How to make entire div clickable with css only

    how to reference elements in CSS or JS files for fastest parsing?

    How can I use CSS to center text in DIV

    Slide Up on Services Pages & Slider Not Working/Showing

    How to show a pointer on specific table with css and Twitter Bootstrap?

    How do I edit the CSS of the Html.DisplayFor method in MVC 3?

    How do i select all nodes and apply a css style to all of them, D3

    How to apply a fixed backgound in fullpage.js

    How to move/position DIV container by changing CSS values using Javascript?

    How can I arrange for a horizontal scroll bar on overflow with flexbox items?

    how to apply css in angular.js

    How to position
    below rest of elements

    How to use a CSS attribute selector to target a specific height?

    How to add an image toward the right of a textbox and the text not overflowing to it

    How to use metro css with codeigniter?

    How to implement icon fonts like github.com

    How to Hide a Textbox with only CSS

    How to have an image incorporate in my text ? HTML CSS

    Problems with jQuery Image Slideshow / Rotating Banner using timeout / interval