How to place a circle inside a square box in css?

Question

I have a webpage made in HTML and CSS in which I want to put a circle inside a square box. Here is the fiddle for the webpage.

At this moment, I am able to make a square containing some words in it but I am unable to put a circle inside the square box. Here is the pictorial representation of what I want.

The HTML and CSS codes which I am using for the square boxes are:

<div class="rectangles">
            <div class="rectangle">

                <p class="ceo">Will's profile, CEO</p>
                <p class="ceo-words">Say something inspiring will</p>
            </div>

            <div class="rectangle">

                <p class="cfo">Jacks Profile, CFO</p>
                <p class="cfo-words">Say something inspiring jack</p>
            </div>

            <div class="rectangle">

                <p class="cto">Zeeshan, CTO</p>
                <p class="cto-words">Say something inspiring </p>
            </div>

            <div class="rectangle">

                <p class="future">Whoever yall hire next</p>
                <p class="future-words">Say something inspiring </p>
            </div>
        </div>

Answer 1

Add a new element and style with css. This way you can include content and images inside it.

.rectangles .rectangle {
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
    margin-right: 5px;
    width: 350px;
    height: 100px;
    border: 1px solid #000;
    background-color: white;
    padding: 10px 10px 10px 100px;
    position: relative;
}

.rectangles .rectangle .circle {
  background: #aaa;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  position: absolute;
  top: 20px;
  left: 20px;
}

<div class="rectangles">
    <div class="rectangle">
        <div class="circle"></div>
        <p class="ceo">Will's profile, CEO</p>
        <p class="ceo-words">Say something inspiring will</p>
    </div>

    <div class="rectangle">
        <div class="circle"></div>
        <p class="cfo">Jacks Profile, CFO</p>
        <p class="cfo-words">Say something inspiring jack</p>
    </div>

    <div class="rectangle">
        <div class="circle"></div>
        <p class="cto">Zeeshan, CTO</p>
        <p class="cto-words">Say something inspiring </p>
    </div>

    <div class="rectangle">
        <div class="circle"></div>
        <p class="future">Whoever yall hire next</p>
        <p class="future-words">Say something inspiring </p>
    </div>
</div>

Answer 2

Try This:

.rectangle:before{
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: absolute;
    background-color: #ccc;
    top: 50%;
    transform: translateY(-50%);
}

.rectangle {
    box-sizing: border-box;
    display: inline-block;
    width: 40%;
    border:1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
    position: relative;
} 

.rectangle:before{
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: absolute;
    background-color: #ccc;
    top: 50%;
    transform: translateY(-50%);
} 

p {
    padding-left: 60px;
}

<div class="rectangles">
    <div class="rectangle">
        <p class="ceo">Will's profile, CEO</p>
        <p class="ceo-words">Say something inspiring will</p>
    </div>

    <div class="rectangle">
        <p class="cfo">Jacks Profile, CFO</p>
        <p class="cfo-words">Say something inspiring jack</p>
    </div>

    <div class="rectangle">
        <p class="cto">Zeeshan, CTO</p>
        <p class="cto-words">Say something inspiring </p>
    </div>

    <div class="rectangle">
        <p class="future">Whoever yall hire next</p>
        <p class="future-words">Say something inspiring </p>
    </div>
</div>

Answer 3

You can use the :before pseudo class, to add the circle.

.rectangle {    
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
    margin-right: 5px;
    width: 350px;
    height: 100px;
    border: 1px solid #000;
    background-color: white;
    padding-left: 70px;
}
.rectangle:before {
    display: block;
    position: absolute;
    left: 15px;
    top: 30px;
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #eee;
}

<div class="rectangle">
    <p class="ceo">Will's profile, CEO</p>
    <p class="ceo-words">Say something inspiring will</p>
</div>

Answer 4

Here's what I changed in your code:

1. First of all jQuery and tether js files must be defined before bootstrap for it work properly.

2. Added the circle using the :before psuedo element to rectangle - see the styles that I have added:

   .rectangles .rectangle {
     border-radius: 10px;
     display: inline-block;
     margin-bottom: 30px;
     margin-right: 5px;
     width: 350px;
     height: 100px;
     border: 1px solid #000;
     background-color: white;
     position: relative; /* ADDED THIS */
     padding: 15px 0 0 90px; /* ADDED THIS */
   }
   .rectangles .rectangle:before { /* ADDED THIS */
       display: block;
       position: absolute;
       top: 50%;
       left: 20px;
       transform: translateY(-50%);
       content: '';
       width: 50px;
       height: 50px;
       border-radius: 100%;
       background-color: #eee;
   }
   

Here's the updated jsfiddle and also a demo below:

html,
body {
  border: 0;
  margin: 0;
  height: 100%;
  min-height: 100%;
}


/**************Nav Bar Start **************/

.bg-faded {
  background-color: #1072B8;
}

.navbar-light .navbar-nav .nav-link {
  color: white !important;
}

.nav-item-insurance {
  color: white !important;
  margin-left: 20px;
  padding-top: 2px;
  font-size: 0.875em;
}

.nav-item-ourstory {
  color: white !important;
  margin-left: 20px;
  padding-top: 2px;
  font-size: 0.875em;
}

.nav-item-login-signup {
  font-size: 0.875em;
  color: white !important;
  margin-left: 20px;
  padding-top:
}

.nav-item-getcovered {
  border-color: #EF7440;
  margin-left: 10px;
  border-style: solid;
  color: white;
  padding-left: 4px;
  padding-bottom: 2.5px;
  padding-right: 4px;
  font-size: 0.750em;
  padding-top: 4.5px;
  letter-spacing: .30em;
  font-family: Adelle PE;
}

@media screen and (max-width: 991px) {
  .nav-item {
    font-family: AvantGarde;
    letter-spacing: .30em;
    color: white !important;
    margin-left: 80px;
  }
  .nav-item-getcovered {
    border-style: solid;
    border-width: 5px;
    padding-left: 40px;
    padding-right: 40px;
    width: 195px;
    border-color: #EF7440;
    margin-left: 70px;
  }
}


/**************Nav Bar Finish **************/

.container {
  width: 100% !important;
}

.col-lg-6 {
  height: 850px;
}

.sections a {
  text-decoration: none;
  position: relative;
  display: inline-block;
  color: #EF7440;
  font-family: "AvantGarde";
  font-size: 2.625em;
  font-weight: bold;
  letter-spacing: .24em;
}

.sections a:after {
  content: "";
  height: 5px;
  width: 50%;
  background-color: #EF7440;
  position: absolute;
  bottom: -.7em;
  left: 50%;
  transform: translate(-50%);
}

#insurance {
  display: flex;
  align-items: center;
  background-size: 100% 100%;
  justify-content: center;
  background-image: url(../assets/img/Uploads/insurance.png);
}

#our-story {
  display: flex;
  background-size: 100% 100%;
  align-items: center;
  justify-content: center;
  background-image: url(../assets/img/Uploads/our%20story.png);
}

#insurance:hover {
  display: flex;
  color: #EF7440;
  font-style: italic;
  align-items: center;
  justify-content: center;
  background-image: url(../assets/img/Uploads/insurance-colour.png);
  background-size: 100% 100%;
}

#insurance a:hover {
  color: #EF7440;
  text-decoration: none;
}

#our-story a:hover {
  color: #EF7440;
  text-decoration: none;
}

#our-story:hover {
  display: flex;
  color: #EF7440;
  font-style: italic;
  align-items: center;
  justify-content: center;
  background-image: url(../assets/img/Uploads/our%20story-colour.png);
  background-size: 100% 100%;
}


/*Athletes (Start) */

.athletes h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-style: italic;
  font-size: 1.250em;
  font-family: "Adelle PE";
  letter-spacing: 0.300em;
  padding-top: 40px;
  padding-bottom: 5px;
}

.athletes h2 {
  font-style: italic;
  line-height: 0.89;
  font-size: 1.250em;
  font-family: "Adelle PE";
  color: white;
  letter-spacing: 0.300em;
  padding-top: 5px;
  padding-bottom: 5px;
}

.athletes p {
  line-height: 1.379;
  font-size: 0.875em;
  font-family: "Adelle PE";
  letter-spacing: 0.300em;
  padding-top: 80px;
  padding-bottom: 70px;
}

@media screen and (max-width: 991px) {
  .athletes p {
    padding-bottom: 40px;
  }
}

.athletes h1,
.athletes h2,
.athletes p {
  margin: 0px !important;
  color: white;
}

.chris-d {
  background-image: url(../assets/img/Uploads/chris-davenport.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 384px;
}

.leticia {
  background-image: url(../assets/img/Uploads/leticia-bufoni.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 384px;
}

.leticia p,
.nfl p {
  padding-right: 650px;
}

@media screen and (max-width: 991px) {
  .nfl p {
    padding-right: 400px;
  }
}

@media screen and (max-width: 991px) {
  .leticia p {
    padding-right: 350px;
  }
}

.leticia h1,
.nfl h1,
.leticia h2,
.nfl h2,
.leticia p,
.nfl p {
  margin-left: 25px !important;
}

.chris-g {
  background-image: url(../assets/img/Uploads/chris-gunnarson.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 384px;
}

.chris-d p,
.chris-g p {
  text-align: right;
}

.chris-d h1,
.chris-g h1,
.chris-d h2,
.chris-g h2 {
  text-align: right;
}

.chris-g h1,
.chris-d h2,
.chris-g h2,
.chris-g p {
  padding-left: 740px;
  padding-right: 30px;
}

.chris-d h1 {
  padding-top: 45px;
  padding-right: 30px;
}

@media screen and (max-width: 991px) {
  .chris-g p {
    padding-left: 340px;
    padding-right: 30px;
  }
}

@media screen and (max-width: 991px) {
  .chris-g h1 {
    padding-left: 0px;
  }
}

@media screen and (max-width: 991px) {
  .chris-d h1 {
    padding-left: 0px;
  }
}

.chris-d p {
  padding-top: 40px;
  padding-left: 840px;
  padding-bottom: 40px;
  padding-right: 30px;
}

.chris-d #readmore-button-right {
  font-family: "Adelle PE";
  font-style: normal;
  width: 550px;
  float: right;
  margin-top: -10px !important;
  border-width: 3px;
  text-transform: uppercase;
  padding-top: 7px;
  padding-bottom: 7px;
  border-color: white;
  margin-right: 30px !important;
  border-style: solid;
  padding-left: 200px;
  padding-right: 200px;
  line-height: 2.109;
  font-size: 16px;
  text-align: center;
}

.chris-d #readmore-button-right:hover {
  font-style: italic;
  font-weight: bold;
}

@media screen and (max-width: 991px) {
  .chris-d p {
    padding-left: 500px;
    width: 950px;
    padding-top: 40px;
    padding-bottom: 25px;
    padding-right: 30px;
  }
}

#watch-ted-talk {
  padding-top: 10px;
  padding-bottom: 50px;
}

.marketplace-background {
  background-image: url(../assets/img/Uploads/nfl-athlete.png);
  background-size: cover;
  color: white;
  font-size: 30px;
  font-weight: bold;
  background-repeat: no-repeat;
  height: 384px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#rtm {
  text-align: center;
}


/***** Searchbar Start *****/

.form-wrapper {
  background-color: #f6f6f6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
  background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
  background-image: linear-gradient(top, #f6f6f6, #eae8e8);
  border-color: #dedede #bababa #aaa #bababa;
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  -moz-box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  box-shadow: 0 3px 3px rgba(255, 255, 255, .1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
  margin-left: auto;
  overflow: hidden;
  margin-top: 40px;
  margin-right: auto;
  padding: 8px;
  width: 450px;
}

.form-wrapper #search {
  border: 1px solid #CCC;
  -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
  -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
  box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #999;
  float: left;
  font: 16px Lucida Sans, Trebuchet MS, Tahoma, sans-serif;
  height: 50px;
  padding: 10px;
  width: 320px;
}

.form-wrapper #search:focus {
  border-color: #aaa;
  -webkit-box-shadow: 0 1px 1px #bbb inset;
  -moz-box-shadow: 0 1px 1px #bbb inset;
  box-shadow: 0 1px 1px #bbb inset;
  outline: 0;
}

.form-wrapper #search:-moz-placeholder,
.form-wrapper #search:-ms-input-placeholder,
.form-wrapper #search::-webkit-input-placeholder {
  color: #999;
  font-weight: normal;
}

.form-wrapper #submit {
  background-color: #0483a0;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
  background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
  background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
  background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
  background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
  background-image: linear-gradient(top, #31b2c3, #0483a0);
  border: 1px solid #00748f;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
  color: #fafafa;
  cursor: pointer;
  height: 48px;
  float: right;
  font: 15px Arial, Helvetica;
  padding: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  width: 100px;
}

.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
  background-color: #31b2c3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
  background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
  background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
  background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
  background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
  background-image: linear-gradient(top, #0483a0, #31b2c3);
}

.form-wrapper #submit:active {
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  outline: 0;
}

.form-wrapper #submit::-moz-focus-inner {
  border: 0;
}


/***** Searchbar Finish *****/


/**** Sections Start ****/

.sections {
  background-color: black;
}


/**** Contents start ****/


/**** About Homesail start ****/

.contents {
  background-color: black;
}

.about-homesail .headline-text:before {
  border-top: 1px solid #1072B8;
  display: block;
  position: relative;
  top: -25px;
  margin: 0 auto;
  width: 50%;
  content: "";
}

.about-homesail .headline-text {
  text-align: center;
  font-size: 24px;
  color: #1072B8;
  padding-top: 60px;
  font-weight: bold;
}

.about-homesail .company-info {
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 100px;
  font-style: italic;
  font-size: 20px;
  color: #1072B8;
}

.rectangles {
  margin-left: 300px;
  margin-right: 334px;
}

.rectangles .rectangle {
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 30px;
  margin-right: 5px;
  width: 350px;
  height: 100px;
  border: 1px solid #000;
  background-color: white;
  position: relative; /* ADDED THIS */
  padding: 15px 0 0 90px; /* ADDED THIS */
}
.rectangles .rectangle:before { /* ADDED THIS */
    display: block;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: #eee;
}


/**** About Homesail finish ****/


/**** Departments Start *****/

.departments .headline-text:before {
  border-top: 1px solid #1072B8;
  display: block;
  position: relative;
  top: -25px;
  margin: 0 auto;
  width: 50%;
  content: "";
}

.departments .headline-text {
  text-align: center;
  font-size: 24px;
  color: #1072B8;
  padding-top: 60px;
  font-weight: bold;
}


/**** Departments Finish *****/


/**** University students start ****/

.university-students .headline-text:after {
  border-top: 1px solid #1072B8;
  display: block;
  position: relative;
  top: 40px;
  margin: 0 auto;
  width: 50%;
  content: "";
}

.university-students .headline-text {
  text-align: center;
  font-size: 24px;
  color: #1072B8;
  padding-top: 60px;
  font-weight: bold;
}

.university-students .company-info {
  padding-left: 250px;
  padding-right: 250px;
  padding-top: 100px;
  font-style: italic;
  font-size: 20px;
  color: #1072B8;
}


/**** University Students finish ****/


/**** Contents Finish ****/

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Northman | Insurance for the Wild</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link rel="stylesheet" href="css/career.css">
   <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <div class="header">

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>


      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item-insurance">
            <a class="nav-link" href="#">About </a>
          </li>
          <li class="nav-item-ourstory">
            <a class="nav-link" href="#">Departments</a>
          </li>
          <li class="nav-item-login-signup">
            <a class="nav-link" href="#">Students</a>
          </li>

        </ul>

      </div>
    </nav>

  </div>
  <div class="marketplace-background">
    <div class="container">

      <div class="row">
        <div class="col-lg-12" id="rtm">Rethinking the marketplace </div>
      </div>
      <form class="form-wrapper">
        <input type="text" id="search" placeholder="Search for your future" required>
        <input type="submit" value="Search" id="submit">
      </form>
    </div>

  </div>

  <div class="contents">
    <div class="about-homesail">
      <p class="headline-text">About HomeSail</p>
      <p class="company-info">aha hahahah ahahahhaha hahhahhahh hahahhh hhhahah hha hahhha hahhhah ahhhhahah ahhhhhhahq ieihfiefpje hahahahhaha ahahahhaha hahhahhahh hahahhh hhhahah hha hahhha hahhhah ahhhhahah ahhhhhhahqabcded hahaha ahahahhahaaaaaasde hahhahhahh hahahhh hhhahah
        hha hahhha hahhhah ahhhhahah ahhhhhhahq hahahah ahahahhaha hahhahhahh hahahhhaefgh hhhahah hha hahhha hahhhah ahhhhahah ahhhhhhahq hahahah ahahahhaha hahhahhahh
      </p>

    </div>

    <div class="rectangles">
      <div class="rectangle">

        <p class="ceo">Will's profile, CEO</p>
        <p class="ceo-words">Say something inspiring will</p>
      </div>

      <div class="rectangle">

        <p class="cfo">Jacks Profile, CFO</p>
        <p class="cfo-words">Say something inspiring jack</p>
      </div>

      <div class="rectangle">

        <p class="cto">Zeeshan, CTO</p>
        <p class="cto-words">Say something inspiring </p>
      </div>

      <div class="rectangle">

        <p class="future">Whoever yall hire next</p>
        <p class="future-words">Say something inspiring </p>
      </div>
    </div>



    <div class="departments">
      <p class="headline-text">Departments</p>
    </div>


    <div class="university-students">
      <p class="headline-text">University Students</p>
      <p class="company-info">Homesail was the brainchild of two university students, that's why here at HomeSail we understand the value of ... blah blah write whatever you want here More text you get the idea make yourselves look good and soo on
      </p>

    </div>
  </div>
</body>
</html>

Answer 5

Can use this solution too

div:first-of-type{
  height:200px;
  width:200px;
  border:1px solid black;
  position:relative;
}

.square>div:nth-of-type(1){
  border-radius:50%;
  height:100%;
  width:100%;
  border:1px solid black;
}

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