Adjacent circles with HTML and CSS

Question

I wonder if it's possible, and if so - how, to draw adjacent circles as seen on the image below with HTML and CSS?

Answer 1

You may try like this:

JSFIDDLE DEMO(Added few more circles to make it more interesting)

CSS

#container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#circle {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #000000;
  border-radius: 50%;
}

#small-circle{
  margin-top: 25%;
  margin-left: 45.5%;
  position: absolute;
  width: 40%;
  height: 40%;
  background-color: #e5e5e5;
  border-radius: 50%;
}#smallest-circle{
  margin-top: 55%;
  margin-left: 78%;
  position: absolute;
  width: 20%;
  height: 20%;
  background-color: #f00;
  border-radius: 50%;
}

HTML

<div id="container">
  <div id="circle">
  </div>
    <div id="small-circle">
      </div>
    <div id="smallest-circle">
      </div>
</div>