Adding extra padding to a div by removing other divs - CSS?

advertisements

I created a fiddle which is working fine but whenever I am trying to add an extra left padding to lef-col, the other two divs move downside.

What I am expecting is that padding applies to the inner content and the outer boundary of div, but in this case it looks like it is adding to the div calculation. Let me know what I understand incorrectly for passing.

PS - I fixed by applying box-sizing: border-box to left-col . I am looking for e.xplanation for this cause than solution(though alternate solutions are welcome too !!)

Code -

HTML -

<div class="container">
        <div class="left-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum perferendis corporis, nemo dolorem, mollitia at sequi quis corrupti. Fugit eaque dolores inventore, aliquam quisquam, saepe officiis eos quia at!</p>
        </div>
        <div class="mid-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum perferendis corporis, nemo dolorem, mollitia at sequi quis corrupti. Fugit eaque dolores inventore, aliquam quisquam, saepe officiis eos quia at!</p>
        </div>
        <div class="right-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos illum perferendis corporis, nemo dolorem, mollitia at sequi quis corrupti. Fugit eaque dolores inventore, aliquam quisquam, saepe officiis eos quia at!</p>
        </div>
    </div>

CSS -

*, html {
    margin: 0;
    padding: 0;
}

body {}

.container {
    padding: 20px;
    overflow: hidden;
}

.left-col, .mid-col, .right-col {
    width: 33.3%;
    float: left;
}

.left-col {
    background: lightpink;
}

.mid-col {
    background: lightgreen;
}

.right-col {
    background: lightblue;
}

Fiddle - https://jsfiddle.net/km2brd8m/


If you add box-sizing: border-box to left-col it will work, and the reason is that when using box-sizing: border-box the padding is included in the set width.

Updated fiddle


You can also subtract the padding from the width using CSS Calc

.left-col {
    width: calc(33.3% - 20px);
    background: lightpink;
    padding-left: 20px;
}

Updated fiddle