CODEWITHSUNDEEP
htmlcss
user1354934
user1354934

Reputation: 8841

How can I put two divs shaped as circles next to each other?

Basically, I am trying to put two circles next to each other (instead of on top)inside of a container.

However, there's a space between them and I want to get rid of it. How can I put two (or more) circles together?

https://jsfiddle.net/hLsu9qj0/

<div class="container">
  <div class="circle">
    circle 1
  </div>
  <div class="circle">
    circle 2
  </div>
</div>

css:

.container {
    position: relative;
    margin: 0 auto;
    line-height: 50px;
    height: 50px;

}

.container .circle {
        height: 50px;
        width: 50px;
        background-color: blue;
        border-radius: 50%;
        text-align: center;
        margin: 0 auto;
        display: inline;
    }

thanks everyone for your help!!!

Upvotes: 1

Views: 2790

Answers (8)

Prajwal Shrestha
Prajwal Shrestha

Reputation: 553

Use float left in circle div

.container .circle {float:left;}

checkit out this http://jsfiddle.net/hLsu9qj0/9/

Upvotes: 1

Nisha Sharma
Nisha Sharma

Reputation: 255

If you want to center them, change width of .container to .container { clear: both; overflow: hidden; width: 23%;}

Upvotes: 0

Chonchol Mahmud
Chonchol Mahmud

Reputation: 2735

UPDATED : JsFiddle

OPTIONAL : This is for overlapping of two circle.Take a look in JsFiddle
Second Way : Link

HTML:

<div class="container">
    <div class="circle">circle 1</div>
    <div class="circle">circle 2</div>
</div>

CSS:

  .container {
   position: relative;
   width: 95%;
   margin: 0 auto;
   line-height: 50px;

   }

   .container .circle {
    height: 50px;
    width: 50px;
    background-color: blue;
    border-radius: 50%;
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-left:5px;
    float:left;
   }

Upvotes: 1

Mike Dinescu
Mike Dinescu

Reputation: 55720

It looks like all you're missing in your CSS is a float: left on the .container .circle { rule

UPDATED

One potential solution to the centering question (from comments) might be to make the .container div the size of the circles and center that

.container {
   position: relative;
   margin: 0 auto;
   line-height: 50px;
   width: 100px;
}

.container .circle {
    height: 50px;
    width: 50px;
    background-color: blue;
    border-radius: 50%;
    text-align: center;
    display: block;
    margin: 0 auto;
    float: left;
}

Or, as someone else suggested use display: inline-block and then set text-align: center on the .container

.container {
   position: relative;
   margin: 0 auto;
   line-height: 50px;
   text-align: center;
}

.container .circle {
    height: 50px;
    width: 50px;
    background-color: blue;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
}

Upvotes: 2

ketan
ketan

Reputation: 19341

Use display: inline-block; instead of display: block;.
And give margin: 0 5px; to .container .circle to give space between.

You can use float:left also.

.container .circle {
        height: 50px;
        width: 50px;
        background-color: blue;
        border-radius: 50%;
        text-align: center;
        display: inline-block;
        margin: 0 5px;
    }

Updated Fiddle

Upvotes: 1

sandeep pandharpure
sandeep pandharpure

Reputation: 39

you can use inside the container 2 div 
    <div class="container">
      <div class="col-md-6">
      </div>
   <div class="col-md-6">
  </div>
</div>

put your code inside the 2 div column it defiantly works bootstrap but you need bootstrap css link inside your .html page

Upvotes: 0

Yazid Erman
Yazid Erman

Reputation: 1186

You should simply add the float:left; to the circle class. To guarantee also a good alignment, I suggest fixing the width and height of the container and set: height:100% to the circle, check the link: //jsfiddle.net/hLsu9qj0/

Upvotes: 0

Afsar
Afsar

Reputation: 3124

Try adding float to .container .circle

float:left

check this https://jsfiddle.net/hLsu9qj0/2/

Upvotes: 1

Related Questions