Css doesn't fit boxes in a box - html

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>

Answer 1

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>

Answer 2

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.

Answer 3

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.