I've been playing around with CSS calc to create some external spacing, similar to an external margin.
For example, in a 3-column layout, the central column ends up being slightly different in width compared to the other two. However, I'm struggling to figure out how to make the text within each column the same width.
There are certain requirements that I need to meet:
I must only use padding, not margin.
In this case, I cannot add padding to container C3.
I want to solve this using the logic behind calc. I am unsure whether percentages are applied first or if I should define the paddings first for the computer to later calculate the percentages...
While I prefer to use the border-box model because it solves many issues in my code, I am willing to sacrifice this if needed.
body {
margin: 0;
padding 0;
}
* {
box-sizing: border-box;
}
p {
text-align: justify;
}
.C3 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.C3>div {
width: 33.33%;
padding: 50px;
}
.C3>div:first-child {
background-color: #DFD;
width: calc(33.33% + 140px);
padding-left: 140px;
}
.C3>div:last-child {
background-color: #FEE;
width: calc(33.33% + 140px);
padding-right: 140px;
}<section class="C3">
<div>
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
<div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.</p>
</div>
<div>
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
</section>Any suggestions?