CODEWITHSUNDEEP
htmlcss
Kane
Kane

Reputation: 924

Building a circle, why do divs overlap?

Hi I'm trying to build a circle with four quarters but my divs seem to be overlapping for some reason.

How can I make it so that the bottom half of the circle does not overlap the top?

Thanks any help appreciated

body {
  margin: 150px;
}

#topleft {
  height: 0px;
  width: 0px;
  border: 90px solid red;
  border-top-left-radius: 180px;
}

#topright {
  height: 0px;
  width: 0px;
  border: 90px solid blue;
  border-top-right-radius: 180px;
}
#bottomleft {
  height: 0px;
  width: 0px;
  border: 90px solid green;
  border-bottom-left-radius: 180px;
}

#bottomright {
  height: 0px;
  width: 0px;
  border: 90px solid yellow;
  border-bottom-right-radius: 180px;
}
<div>
  <span id="topleft"></span>
  <span id="topright"></span>
</div>
<div>
  <span id="bottomleft"></span>
  <span id="bottomright"></span>
</div>

Upvotes: 1

Views: 90

Answers (3)

rby
rby

Reputation: 786

The problem is that your div has no height - it is essentially zero so that the span elements end up overlapping. Since the div is a block element, the width adjusts automatically to fit its contents, but not the height. Solution is to set height:

div { 
  height: 180px;
}

Here's a fiddle: https://jsfiddle.net/vn9163tp/

Upvotes: 1

shamim khan
shamim khan

Reputation: 477

It's provably width and height issue. if you give width and height 90px it may be solve. also use background color instead of border color. 

#topleft {
  height: 90px;
  width: 90px;
  display: inline-block;
  background-color: red;
  border-top-left-radius: 180px;
}

#topright {
  height: 90px;
  width: 90px;
  display: inline-block;
  background-color: blue;
  border-top-right-radius: 180px;
}
#bottomleft {
  height: 90px;
  width: 90px;
  display: inline-block;
  background-color: green;
  border-bottom-left-radius: 180px;
}

#bottomright {
  height: 90px;
  width: 90px;
  display: inline-block;
  background-color: yellow;
  border-bottom-right-radius: 180px;
}
<div>
  <span id="topleft"></span>
  <span id="topright"></span>
</div>
<div>
  <span id="bottomleft"></span>
  <span id="bottomright"></span>
</div>

Upvotes: 1

Dhaval Chheda
Dhaval Chheda

Reputation: 5147

Use this code 

<style>
        body {
            margin: 150px;
        }

        .semi-circle-1 {
            display: flex;
        }

        .semi-circle-2 {
            display: flex;
        }

        #topleft {
            height: 0px;
            width: 0px;
            border: 90px solid red;
            border-top-left-radius: 180px;
        }

        #topright {
            height: 0px;
            width: 0px;
            border: 90px solid blue;
            border-top-right-radius: 180px;
        }

        #bottomleft {
            height: 0px;
            width: 0px;
            border: 90px solid green;
            border-bottom-left-radius: 180px;
        }

        #bottomright {
            height: 0px;
            width: 0px;
            border: 90px solid yellow;
            border-bottom-right-radius: 180px;
        }

    </style>

</head>

<body>

    <div class="semi-circle-1">
        <div id="topleft"></div>
        <div id="topright"></div>
    </div>
    <div class="semi-circle-2">
        <div id="bottomleft"></div>
        <div id="bottomright"></div>
    </div>

Upvotes: 0

Related Questions