Css doesn't fit boxes in a box

Question

I used figma to build a design and exported css code below. I added some div classes but it still doesn't fit properly.

I tried making the classes a subclass of the main class but it still didn't work.

I assumed this might work the way columns and rows do, the rows comes first then the columns follow.

.pagingg {
  position: absolute;
  width: 338px;
  height: 61px;
  left: 88px;
  top: 97px;
  background: #FBF6F6;
  border: 1px solid #F8EBEB;
  box-sizing: border-box;
  border-radius: 2px;
}

.pagingg.firstpg {
  position: absolute;
  width: 88px;
  height: 19px;
  left: 104px;
  top: 106px;
  background: #FFFFFF;
  border: 1px solid #E6C3C3;
  border-radius: 2px;
}

.pagingg.pgnum {
  position: absolute;
  width: 58px;
  height: 14px;
  left: 223px;
  top: 110px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 10px;
  line-height: 14px;
  /* identical to box height */
  color: #000000;
}

.pagingg.lastpg {
  position: absolute;
  width: 89px;
  height: 16px;
  left: 214px;
  top: 133px;
  background: #FFFFFF;
  border: 1px solid #E6C3C3;
  border-radius: 1px;
}

.nextpg {
  position: absolute;
  width: 88px;
  height: 19px;
  left: 319px;
  top: 106px;
  background: #FFFFFF;
  border: 1px solid #E6C3C3;
  border-radius: 2px;
}

.pagingg.fpg {
  position: absolute;
  width: 22px;
  height: 15px;
  left: 138px;
  top: 106px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 300;
  font-size: 11px;
  line-height: 15px;
  /* identical to box height */
  color: #000000;
}

.pagingg.pgnumtext {
  position: absolute;
  width: 58px;
  height: 14px;
  left: 223px;
  top: 110px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 10px;
  line-height: 14px;
  /* identical to box height */
  color: #000000;
}

.pagingg.lastpgtext {
  position: absolute;
  width: 21px;
  height: 15px;
  left: 247px;
  top: 133px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 300;
  font-size: 11px;
  line-height: 15px;
  /* identical to box height */
  color: #000000;
}

.pagingg.nextpgtext {
  position: absolute;
  width: 26px;
  height: 15px;
  left: 350px;
  top: 107px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 300;
  font-size: 11px;
  line-height: 15px;
  /* identical to box height */
  letter-spacing: 0.075em;
  color: #000000;
}

<div class="pagingg">
  <div class="pagingg firstpg">
    First
  </div>
  <div class="pgnum">
    <div class="pgnumtext">2 0f 5</div>
  </div>
  <div class="lastpg">
    <div class="lastpgtext">Last</div>
  </div>
  <div class="nextpg">
    <div class="nextpgtext">Next</div>
  </div>
</div>

You should rethink all the layout. Using `position: absolute` on every element is not a good idea. Can you change also the HTML ? or the HTML structure should be as you wrote it ? — Mihai T, Jan 31 '20 at 08:41

score 3 · Answer 1 · answered Jan 31 '20 at 08:47

Do not use position:absolute on every element. Use it only when absolutely necessary. You can read about it here -> CSS Position

For this requirement you can just use flexBox which is the recommended solution for layout purposes.

Read more about flexbox -> a-guide-to-flexbox or here -> MDN Flexbox

See below:

.pagingg {
  display:flex;
  flex-wrap:wrap;
  width: 300px;
  justify-content: space-between;
  align-items: center;
}
.lastpg {
  width: 100%;
  text-align: center;
}
.text {
  border: 1px solid black;
  background-color: grey;
  display:inline-block;
  padding: 5px 20px;
}

<div class="pagingg">
    <div class=" firstpg">
        <div class="firstpgtext text">
        First
        </div>
    </div>
    <div class="pgnum">
        <div class="pgnumtext ">2 0f 5</div>
    </div>
    
    <div class="nextpg">
        <div class="nextpgtext text">Next</div>
    </div>
    <div class="lastpg">
        <div class="lastpgtext text">Last</div>
    </div>
</div>

score 0 · Answer 2 · answered Feb 07 '20 at 08:03

0

Figma will generate you only general styles, like font-size, font-weight, color, background, letter-spacing etc.

For position, display, width, height, padding and other specific style you will need to write code.

answered Feb 07 '20 at 08:03

Pixel Time

78
7

score 0 · Answer 3 · answered May 14 '21 at 15:35

Everyone is correct. You don't want to use Figma's absolute positioning in your HTML/CSS.

Instead you need to start by understanding the structure you need and figure out the nesting and positioning. You can position elements in HTML/CSS using grids, which are more modern and work better than previous approaches like tables, floats, etc.

A great tool that will help you get started quicker, is Desech Studio which imports your Figma file and positions elements relatively using grids, automatically. You still have to do some adjustments here and there, but it's a better starting point than absolute zero.

Css doesn't fit boxes in a box

3 Answers3