CODEWITHSUNDEEP
htmlcss
Jamie Eltringham
Jamie Eltringham

Reputation: 806

Getting boxes and text to appear in the correct way

I am trying to create a dashboard and I'm having a bit of an issue with my lay out

I am able to get 4 boxes together with some text but I cant get the text in the correct place and I need to add another box in the middle and I'm unsure how to do so 

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#first,
#second,
#third,
#fourth {
  border: 1px solid white;
  height: 120px;
  width: 120px;
  background: lightgreen;
}

p {
  text-align: center;
  vertical-align: bottom;
  color: black;
}
<h2 align="center">PI Graphs</h2>
<div style="width: 250px; height: 240px; margin-left: 10px">
  <div id="first" style="float: left; border-top-left-radius:10px;">
    <p>Locations Counted</p>
  </div>
  <div id="second" style="float: left; border-top-right-radius:10px;">
    <p>Locations Accurate</p>
  </div>
  <div id="third" style="float: left; border-bottom-left-radius:10px;">
    <p>Serial Not Exist</p>
  </div>
  <div id="fourth" style="float: left; border-bottom-right-radius:10px;">
    <p>Serials Wrong Location</p>
  </div>
</div>

currently

this is what I end up with and this is what I need it to resemble

enter image description here

can somebody give me some help on how to achieve this

Upvotes: 0

Views: 48

Answers (1)

Angel Politis
Angel Politis

Reputation: 11313

Usually, for this kind of design, you would probably be best to go for an HTML markup that splits a container into multiple rows, but alternatively, you can take advantage of flexbox as in the following suggested solution.

Since we're trying to retain the markup you're using, in order to create the centered box in your image, we will have to take it out of the flow and then center it using:

  • position: absolute,
  • top: 50%,
  • left: 50% and
  • transform: translate(-50%, -50%).

Snippet:

.container {
  width: 240px;
  height: 240px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin: 10px auto;
}

.box {
  color: #fff;
  height: 120px;
  width: 120px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background-color: #70ad47;
  border: 1px solid #fff;
}

.box.top-row {
  align-items: flex-start;
}

.box.bottom-row {
  align-items: flex-end;
}

.box > p {
  text-align: center;
}

#tl-box {
  border-top-left-radius: 10px;
}
 
#tr-box {
  border-top-right-radius: 10px;
}

#bl-box {
  border-bottom-left-radius: 10px;
}

#br-box {
  border-bottom-right-radius: 10px;
}

#cc-box {
  color: #0c0e0c;
  height: 50%;
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #bbd3b1;
  border: 2px solid #fff;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}
<h2 align = "center">PI Graphs</h2>
<div class = "container">
  <div id = "tl-box" class = "box top-row">
    <p>Locations Counted</p>
  </div>
  <div id = "tr-box" class = "box top-row">
    <p>Locations Accurate</p>
  </div>
  <div id = "bl-box" class = "box bottom-row">
    <p>Serial Not Exist</p>
  </div>
  <div id = "br-box" class = "box bottom-row">
    <p>Serials Wrong Location</p>
  </div>
  <div id = "cc-box" class = "box">
    <p>Current Days Accuracy 98%</p>
  </div>
</div>

Upvotes: 3

Related Questions