CSS calc function does not center

Question

I need to use the calc function for width but it doesn't divide distance around.

HTML

<div class="container-card">
    <div class="container-holder"></div>
</div>

SCSS

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
        background-color: gold;
        width: calc(100% - 14px);
        height: 300px;
    }
}

Here is an example:

https://jsfiddle.net/fze3L0w8/

In other words: I need 14px distance from left and right in every width.

you need to center the `.container-holder` ? Be more specific. — , Jan 15 '20 at 06:29
You need to use margin or display flex property to align items inside a div https://www.w3.org/Style/Examples/007/center.en.html — M4FI4S, Jan 15 '20 at 06:40

score 2 · Answer 1 · answered Jan 15 '20 at 06:28

2

Just set a margin of 14px, and you will no longer need to set the width property:

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
      background-color: gold;
      margin: 14px;
      height: 300px;
    }
}

Here's an updated fiddle.

answered Jan 15 '20 at 06:28

Robby Cornelissen

91,784
22
134
156

so when I should use calc? – heliya rb Jan 15 '20 at 06:41
1

Sparingly, as it comes with a performance impact. This case is pretty simple to solve without `calc()`: a `div` is a block level element; it already has a default width of 100%, and you can apply margins to it. No need for any calculations. – Robby Cornelissen Jan 15 '20 at 06:43

score 2 · Answer 2 · answered Jan 15 '20 at 06:29

2

this is the solution:

background-color: gold;
width: calc(100% - 28px);
height: 300px;
margin: auto;

you need margin from left o rright also

answered Jan 15 '20 at 06:29

Saeed Jamali

1,195
2
7
19

score 2 · Accepted Answer · answered Jan 15 '20 at 06:30

2

You can use margin:auto; for adding space from both side. And you need to set it 100% - 28px

.container-card {
    background-color: grey;
    height: 500px;
   
  }
   .container-holder {
      background-color: gold;
      width: calc(100% - 28px);
      height: 300px;
      margin: auto;
    }

<div class="container-card">
    <div class="container-holder">

    </div>
  </div>

answered Jan 15 '20 at 06:30

Ijaz Ali

128
9

margin works alone so why should use calc? – heliya rb Jan 15 '20 at 06:40
#heliya rb because we are only only need 28px from the total width. So, we are calc using. – Ijaz Ali Jan 15 '20 at 06:45
if we use margin 14px for left and right always set 28px from width. it isn't true? – heliya rb Jan 15 '20 at 07:00
#heliya rb yes it is true.If you set margin 14px without define width it will take equal space from both side. – Ijaz Ali Jan 15 '20 at 07:16
#heliya rb In this case browser will adjust with to auto when you will not set with attribute. – Ijaz Ali Jan 15 '20 at 07:19

Ahmed Yousif · Answer 4 · 2020-01-15T07:26:22.540

1

you either set it 100% - 28px to reduce width by 14px right and left and set margin: auto; to center the div

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
      background-color: gold;
      width: calc(100% - 28px);
      margin: auto;
      height: 300px;
    }
  }

or only set margin:0px 14px; and no need to set width it will take parent width - margin

  .container-card {
        background-color: grey;
        height: 500px;
        .container-holder {
          background-color: gold;
          margin: 0px 14px;
          height: 300px;
        }
      }

edited Jan 15 '20 at 07:26

answered Jan 15 '20 at 06:30

Ahmed Yousif

2,298
1
11
17

margin works alone so why should use calc? – heliya rb Jan 15 '20 at 06:35
1

@heliyarb check updated solution – Ahmed Yousif Jan 15 '20 at 07:27

score 0 · Answer 5 · answered Jan 15 '20 at 06:34

More elegant solution is that -

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
      background-color: gold;
      width: calc(100% - 28px);
      height: 300px;
      margin: 0 auto;
    }
  }

Calc function will get 28px and to center an element inside another one. use margin: 0 auto;

score 0 · Answer 6 · answered Jan 15 '20 at 06:34

0

Just center the container instead of this hard coded brittle approach with something like flex, then you can use whatever margin you want without it breaking.

.container-card {
  display: flex;
  justify-content: center;
  background-color: grey;
  height: 500px;
}
.container-holder {
  background-color: gold;
  margin: 0 14px;
  width: 100%;
  height: 300px;
}

 <div class="container-card">
    <div class="container-holder">

    </div>
  </div>

answered Jan 15 '20 at 06:34

Dominic

62,658
20
139
163

please check https://stackoverflow.com/questions/59747337/flex-cant-use-two-justify-for-one-div. I need help – heliya rb Jan 15 '20 at 08:49

score 0 · Answer 7 · answered Jan 15 '20 at 08:07

0

CSS calc function does not center

7 Answers7