Last Updated:

How to make div square (CSS)

We regularly publish such useful articles. 

 

Task

Make rubber div square (width equals height).

Put content in squares.

<div id="parent">

<div class="item">

<div class="item-ins"></div>

</div>

<div class="item">

<div class="item-ins"></div>

</div>

<div class="item">

<div class="item-ins"></div>

</div>

</div>

Decision

The width of the parent div varies from resolution to resolution, so let's set the internal blocks width:

.item {

position: relative;

width: calc(100%/3);

}

Good hosting for the site

For the square shape, we apply the following design:

.item {

height: 0;

padding-bottom: calc(100%/3};

}

For an indoor unit that will contain content and that should use the entire parent's area:

.item-ins {

position: absolute;

width: 100%;

height: 100%;

}