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 0 · Answer 1 · answered Feb 12 '22 at 16:43

0

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

731
1
9
24

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

score -1 · Answer 2 · 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%

2 Answers2