Adjust the Division's Width to be 20% of the Total Page Width Excluding Margins

Question

I need to create a menu page with 5 equal columns, but I'm facing an issue with the layout.

Here's my current CSS for the yellow divs:

width:20%;
height:100vh;
background-color: yellow;
display:inline-block;

In addition, I have set margin:0;. How can I eliminate the small white gap between each of the yellow blocks?

Answer 1

Answer №1

When utilizing display inline-block, a strange issue arises where unwanted gaps form between elements: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

An easy solution is to change the approach by floating the divs left instead of relying on display: inline-block.

div {
    width:20%;
    height:100vh;
    background-color: yellow;
    float: left;
}

<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>

Answer 2

When utilizing display inline-block, a strange issue arises where unwanted gaps form between elements: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

An easy solution is to change the approach by floating the divs left instead of relying on display: inline-block.

div {
    width:20%;
    height:100vh;
    background-color: yellow;
    float: left;
}

<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>