0

I am trying to create a simple column system. Total, there can be 12 columns in one row, very similar to bootstrap. My calculations are done in such a way that .col-1 takes up 8% of the width the parent div. So that 12 columns would add up to 96%. So there should not be an issue. However, even after doing this, my children divs (columns) overflow into the next line, which is rather peculiar. Here is my code:

Html

<html>
<body>
  <br /><br />
  <div class="container" style="border: 1px solid red;">
        <div class="columns" style="border: 1px solid blue;">
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>

            <div class="col-6 bordered"></div>
            <div class="col-6 bordered"></div>
        </div>
    </div>
</body>
</html>

CSS

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
}
.container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.columns {
    width: 100%;
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.columns [class^="col"] {
    display: inline-block;
    text-align: left;
    margin: 0;
    min-height: 1px; /* Minimum height set to 1px so that even empty columns 
    will take up width, removing the need for offsets. */
}
.col-1 {
    width: 8%;
}
.col-2 {
    width: 16%;
}
.col-3 {
    width: 24%;
}
.col-4 {
    width: 32%;
}
.col-5 {
    width: 40%;
}
.col-6 {
    width: 48%;
}
.col-7 {
    width: 56%;
}
.col-8 {
    width: 64%;
}
.col-9 {
    width: 72%;
}
.col-10 {
    width: 80%;
}
.col-11 {
    width: 88%;
}
.col-12 {
    width: 96%;
}
.bordered {
    border: 1px solid black;
    height: 20px;
}

You can see the results here: https://jsfiddle.net/L9txad4h/

As you can see, 12 .col-1 elements should stay in one row, but one overflows to the bottom row. Any help is appreciated.

darkhorse
  • 8,192
  • 21
  • 72
  • 148
  • I think what you're looking for is `max-width`, and `overflow`. You also need to take into account for any `padding`, or `margins` when performing your calculations. – somebody Sep 13 '19 at 19:40
  • 1
    fixed in your https://jsfiddle.net/u3tzbfsx/1/ happy coding!! – Darpan Rangari Sep 13 '19 at 20:04

0 Answers0