Last Updated:

Divide the width of the rubber div into three equal parts (CSS)

Task

There is a parent div with a relative width. The width of the div depends on the screen resolution, i.e., everything changes on different devices.

It is necessary to place three blocks of equal width in this div so that they completely occupy the width of the parent part without a residue.

<div id="parent">

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

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

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

</div>

Decision

We do not know the width of the parent div (it varies from resolution to resolution), so we cannot set a fixed width for indoor blocks. We operate with percentages. The problem is that 100% by 3 without residue is not divisible.

Variant

.item {

width: 33.333%;

}

discard, wretched.

Correct:

.item {

width: calc(100%/3);

}

Simple and elegant. The width of the indoor units will be automatically calculated depending on the width of the parent.