CODEWITHSUNDEEP
htmlcss
jadeallencook
jadeallencook

Reputation: 686

Positioning A Circle In The Middle Of Two Divs

I have one DIV positioned right.

.right {
width:25%;
height:100%;
background-color:#000;
position:fixed;
right:0px;
z-index:1;

And left

.left {
width:25%;
height:100%;
background-color:#000;
position:fixed;
left:0px;
z-index:1;

And I'm trying to put this circle 

.circle {
height:100px;
width:100px;
border-radius:50px;
background-color:#F00;
position:fixed;
left:45%;
z-index:99;

in the middle

this is my HTML

<div class="left">
</div>

<div class="centerc">
<div class="circle">
</div>

<div class="right">
</div>

What am I doing wrong and how do I fix it?

Upvotes: 0

Views: 1025

Answers (4)

Jason Aller
Jason Aller

Reputation: 3654

http://jsfiddle.net/R8YRh/1/ demonstrates using:

.centerc {
    text-align:center;
}

and the addition of display: inline-block; to .circle. This required the addition of top: 0; to .right.

.left {
    width:25%;
    height:100%;
    background-color:#000;
    position:fixed;
    left:0;
    z-index:1;
}
.right {
    width:25%;
    height:100%;
    background-color:#000;
    position:fixed;
    right:0;
    top: 0;
    z-index:1;
}
.centerc {
    text-align:center;
}
.circle {
    display: inline-block;
    height:100px;
    width:100px;
    border-radius:50px;
    background-color:#F00;
    z-index:99;
}
<div class="left"></div>
<div class="centerc">
    <div class="circle"></div>
</div>
<div class="right"></div>

Upvotes: 1

Tiago Marinho
Tiago Marinho

Reputation: 2216

Try to put this inside .circle styling:

left:50%;
margin-left:-50px;

left:50%; will put the left side of the .circle in the middle of the screen, then margin-left:-50px; will put the .circle 50px to the left (half of its width).

Also, it's a good idea to remove the non-closed .centerc div.

Demo

*{margin:0;}
body{
    background:#fff;
}
.left{
    position:fixed;
    height:100%;
    width:25%;
    left:0;
    background:#222;
}
.circle{
    z-index:1;
    position:fixed;
    width:100px;
    height:100px;
    left:50%; /* Left side of the circle centered */
    margin-left:-50px; /* A half of circle width to the left */
    border-radius:50px;
    background:#F33;
}
.right{
    position:fixed;
    height:100%;
    width:25%;
    right:0;
    background:#222;
}
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>

Upvotes: 2

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

If you are meaning to have the left and right divs aligned and the circle div floating over them in dead center here's a quick fiddle to set you in that direction.

http://jsfiddle.net/Hastig/zLsbE/

I added a container div wrapped around all three (left, right and circle) and set it to position: relative

I then set the circle div to position: absolute and played with it's left and top alignment to center it.

Note - It's not a responsive solution.

.container {
    width: 500px;
    height: 250px;
    position: relative;
}
.left {
    float: left;
    width: 250px;
    height: 250px;
    background-color: #000;
}
.right {
    float: right;
    width: 250px;
    height: 250px;
    background-color: #555;
}
.circle {
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background-color: #F00;
    position: absolute;
    top: 75px;
    left: 200px;
}
<div class="container">
  <div class="left"></div>
  <div class="circle"></div>
  <div class="right"></div>
</div>

Upvotes: 1

showdev
showdev

Reputation: 29168

Your code seems to be working. However, the circle is off-center.

I suggest that you define the circle's position as 50% of the container's width minus 50% of the circle's width:

.circle {
    ...
    width:100px;
    left:50%;
    margin-left:-50px;
}

Also, since everything is position:fixed, I don't see the purpose of div.centerc. I removed it.

<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>

Working example (jsFiddle)

Upvotes: 2

Related Questions