HTML div goes on next line even though width is 33%

Question

Please help me understand this. Here is my HTML (body)

<body>
    <main class="container">
        <div class="row">
            <div class="col">Sparky</div>
            <div class="col">Vegeta</div>
            <div class="col">Flufferpants</div>
        </div>
    </main>
</body>

Here is my CSS

* {
    font-size: 25px;
    /* box-sizing: border-box; */
}
body {
    background-color: gray;
}
.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: lightgoldenrodyellow;
}
.row {
    background-color: rgb(119, 103, 134);
    width: 100%;
}
.col {
    display: inline-block;
    width: 33%;
    height: 200px;
}

I am trying to have the 3 cols be on a single row, evenly spaced apart. I know this is easily done through flexbox, but I wanted to try using the width property manually.

Even when I set each of the col to be width 33%, it still rolls onto the next line. What's going on here?

https://jsfiddle.net/zd29ewb6/

Thanks

score -1 · Answer 1 · answered Feb 12 '22 at 16:43

-1

use display flex on the row

* {
    font-size: 25px;
    /* box-sizing: border-box; */
}
body {
    background-color: gray;
}
.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: lightgoldenrodyellow;
}
.row {
    background-color: rgb(119, 103, 134);
    width: 100%;
    display: flex;
}
.col {
    width: 33%;
    height: 200px;
}

answered Feb 12 '22 at 16:43

corsaro

670
1
8
22

He explicitly asked for a non-flex solution. – KaibutsuX Feb 12 '22 at 16:53

score -1 · Answer 2 · answered Feb 12 '22 at 16:52

You have whitespace in between your col divs. If you add border: 1px solid to your col css, you can see that the cols are not sitting next to each other. It's because the literal newlines between your divs are essentially putting out an empty textNode between them.

Remove the newlines, put all the divs on the same line and you'll see that the columns collapse together and fit at 33% width.

score -2 · Answer 3 · answered Feb 12 '22 at 17:49

using inline-block elements there always be a whitespace between the elements and you set your width 33% and adding the width of all the 3 divs its width gets more then the parents width so it shift the third element to next line. so you can reduce the width of col like this.

.col {
    display: inline-block;
    width: 30%;
    height: 200px;
}

HTML div goes on next line even though width is 33%

3 Answers3