Using width and calc on css

Question

I am experimenting a bit with calc on css to define some external space (like an external margin)

For example in this 3 column layout, the resulting width of the central column is a bit diferent than the other two, but I can not figure out how to make the text the same width.

There are some requirements I need.

I need to use only padding, not margin.
I can not add padding to the container C3 in this case.
I want to solve it using the logic under calc. I don't know if the percentages are applied first, or I need to define the paddings first to the computer later solve the percentages...
I prefer to use the border-box model, because it is solving me a lot of problems on other places of my code... but probably I can sacrifice this one.

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 ideas?

Since you're using box-sizing: border-box, the width already includes the padding. The 140px are being added twice. — castletheperson
– castletheperson, Commented Jun 7, 2016 at 1:26

castletheperson · Accepted Answer · 2016-06-07 01:45:34Z

1

Since you're using box-sizing: border-box, the width already includes the padding. The 140px are being added twice.

width: 33.33% is all that's needed.

answered Jun 7, 2016 at 1:45

castletheperson

33.7k11 gold badges74 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JackHasaKeyboard Over a year ago

Or just use 3 table cells.

Rafael · Accepted Answer · 2016-06-07 01:56:50Z

4castle answer made me realize that yes, I was repeating something, but i found it that was the 50px.

So in my margin I needed to substract 50px from the calc, and now I have 90px.

The diference is subtle but now I have the exact same column text size.

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% + 90px);
	padding-left: 140px;}
	
.C3>div:last-child {
	background-color: #FEE; 
	width: calc(33.33% + 90px);
	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>

Collectives™ on Stack Overflow

Using width and calc on css

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related