CODEWITHSUNDEEP
htmlcssposition
Andrew Walker
Andrew Walker

Reputation: 492

Centre div over four divs within container on responsive site

This is the image I have:

enter image description here

How do I centre the black circle, I have tried a number of ways, best has been using absolute, but i cannot make it responsive.

Its on JSFIDDLE

And here is the code:

HTML

<div class="main">
    <div class="center"></div>
    <div class="leftTop"></div>
    <div class="rightTop"></div>
    <div class="leftBottom"></div>
    <div class="rightBottom"></div>
</div>

CSS

.main {
    position:relative;
    width:100%;
    height:100%;
}

.rightTop {
    float:right;
    background-color:red;
    min-width:50%;
    height:250px;
}

.leftTop {
    float:left;
    background-color:blue;
    min-width:50%;
    max-width:50%;
    height:250px;
}

.rightBottom {
    float:right;
    background-color:yellow;
    min-width:50%;
    height:250px;
}

.leftBottom {
    float:left;
    background-color:orange;
    min-width:50%;
    max-width:50%;
    height:250px;
}

.center {
    position:absolute;
    left: 50%;
    top: 50%;
    height:400px;
    background-color:black;
    width:400px;
    border-radius:50%;
}

As I have said above, I have managed to centre it using LEFT, TOP but it is not responsive. Also it's not 50% as I would expect.

Any ideas what it is i am doing incorrectly ?

Upvotes: 0

Views: 110

Answers (5)

jbutler483
jbutler483

Reputation: 24559

You could use positioning for this (getting rid of those inefficient and horrible float elements), in combination with the calc css3 property.

You may also be interested in using vw units, in which I have used to make the circle responsive to the width of the screen:

html,
body {
  margin: 0;
  padding: 0;
}
.wrap {
  margin: 5vw;
  height: 80vh;
  width: 90vw;
  display: inline-block;
  position: relative;
}
.wrap div {
  position: absolute;
  height: 50%;
  width: 50%;
}
.wrap .red {
  background: tomato;
  top: 0;
  left: 0;
}
.wrap .yellow {
  background: yellow;
  top: 0;
  left: 50%;
}
.wrap .green {
  background: lime;
  top: 50%;
  left: 0;
}
.wrap .blue {
  background: cornflowerblue;
  top: 50%;
  left: 50%;
}
.wrap .black {
  background: black;
  height: 20vw;
  width: 20vw;
  border-radius: 50%;
  top: -webkit-calc(50% - 10vw);
  top: calc(50% - 10vw);
  left: -webkit-calc(50% - 10vw);
  left: calc(50% - 10vw);
}
<div class="wrap">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="black"></div>
</div>

Upvotes: 2

CoenFuze
CoenFuze

Reputation: 494

You should be clearing the floats in your main container.

To do so add this to the main element:

    <div class="main">
        <div class="center"></div>
        <div class="leftTop"></div>
        <div class="rightTop"></div>
        <div class="leftBottom"></div>
        <div class="rightBottom"></div>

        <div class="clearfix"></div>
    </div>

    <style>
    /* Add this to your CSS */
    .clearfix{
       clear:both;
    }
    </style>

This will make the main container expand to the height of those floaters. After that you can use:

.center{
    margin-top:-200px;
    position:absolute;
    left: 50%;
    top: 50%;
    height:400px;
    background-color:black;
    width:400px;
    border-radius:50%;
}

**OR** 

.center { 
    position:absolute;
    left: 50%;
    top: 50%;
    height:400px;
    background-color:black;
    width:400px;
    border-radius:50%;
    transform:translate(-50%,-50%); /* This property doens't rely on pixels of the element, so the element can also be defined in percentages */
    -webkit-transform:translate(-50%,-50%);
}

Upvotes: 1

Persijn
Persijn

Reputation: 15000

DEMO

Added:

  1. top: 50%;, and left: 50%; to make it displayed relative to its parent: .main { position: relative
  2. Added transform: translate(-50%, -50%) to center it. To center it on its own center point :D

Upvotes: 1

Jenti Dabhi
Jenti Dabhi

Reputation: 880

Add this css in your code:

.center {
    background-color: #000000;
    border-radius: 50%;
    height: 400px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    width: 400px;
}

See demo http://jsfiddle.net/JentiDabhi/gnhwork9/1/

Upvotes: 0

Roy Sonasish
Roy Sonasish

Reputation: 4609

just add margin-left:-200px; in

.center {
    position:absolute;
    left: 50%;
    top: 50%;
    height:400px;
    background-color:black;
    width:400px;
    border-radius:50%;
    margin-left:-200px;
}

here is the updated fiddle file

Upvotes: 2

Related Questions