CODEWITHSUNDEEP
htmltwitter-bootstrapcssbootstrap-4
user5447339
user5447339

Reputation:

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

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>

Upvotes: 5

Views: 16516

Answers (5)

Gourab Konar
Gourab Konar

Reputation: 170

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>

Upvotes: 2

Ehsan
Ehsan

Reputation: 12951

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>

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 0

itodd
itodd

Reputation: 2373

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>

Upvotes: 1

Chava Geldzahler
Chava Geldzahler

Reputation: 3730

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>

Upvotes: 0

Related Questions