When I try to put 5 inline-block divs of 20% width with 1px borders,

Question

0

Asked: May 22, 20262026-05-22T17:42:31+00:00 2026-05-22T17:42:31+00:00

When I try to put 5 inline-block divs of 20% width with 1px borders,

0

When I try to put 5 inline-block divs of 20% width with 1px borders, inside a containing div, also with a 1px border, they wrap on to the next line.

They do fit if I get rid of all the borders.

I understand that this is because the divs take up 100% of the containing divs area, including its padding and border area, meaning that they don’t fit within the borders, so it has to wrap.

My question is how to modify this so that I can make them fit exactly. Surely this is a common problem?

<html>
    <head>
        <title> Test </title>
        <style type=text/css>

            div
            {
                margin: 0;
                padding: 0;
            }
            #navBar
            {
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
                margin-top: 10px;
                width: 50%;
            }
            .navBtn
            {
                border: 1px solid black;
                display: inline-block;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="navBar">
            <div class="navBtn" style="width:20%">Text</div><div class="navBtn" style="width:20%">Text</div><div class="navBtn" style="width:20%">Text</div><div class="navBtn" style="width:20%">Text</div><div class="navBtn" style="width:20%">Text</div>
        </div>
    </body>
</html>

As a side note, it’s crazy that if I put the 5 divs on their own lines, they get rendered with space between them, hence why they’re all on one line. In my real code the divs are generated with php, so it’s not long.