Margins being added to the total width despite using box sizing

Question

I'm running into an issue where the margin of my elements is being added to their total width, rather than being taken into account before the width is calculated, despite using the box-sizing: border-box property.

So basically, I have 2 elements: a sidebar and main content div, that are stacked neatly together when there's no margins. But as soon as I add margins, the sidebar climbs on top of the content.

* {
  font-family: 'Roboto', sans-serif;
}

body {
  width: 1265px;
  display: inline-block;
  box-sizing: border-box;
}

main {
  margin: auto;
}

.centerContent {
  width: 75%;
  margin: auto;
  float: right;
}

.sidebar {
  width: 25%;
  height: 100%;
  margin-top: 10px;
  float: left;
  background-color: #eaf4f7;
  margin-left: 10px;
  margin-right: 10px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

code {
  width: 600px;
  font-family: 'Source Code Pro', monospace;
  color: #43892a;
  background-color: #000;
  display: block;
}

header {
  margin-left: 15px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #a72525;
}

<body>
  <header>
    <h1>Batch Documentation</h1>
  </header>
  <main class="clearfix">
    <div class="sidebar">
      <ul>
        <li>Test</li>
        <li>Test2</li>
        <li>Test3</li>
      </ul>
    </div>
    <div class="centerContent">
      <h2>Sample text</h2>
      <code>Hello</code>
    </div>
  </main>
</body>

I expect the output to have the sidebar on the left and the content next to it, but being able to define a margin/padding without distorting the model.

Henrique · Answer 1 · 2020-01-27T19:58:54.183

You need add box-sizing:border-box; in your universal selector, check this out: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

* {
  box-sizing:border-box;
  font-family: 'Roboto', sans-serif;

}

After that, you need make some changes in the sidebar class, turn your margin-left and margin-right to padding-left and padding-right

.sidebar {
    width: 25%;
    height: 100%;
    margin-top: 10px;
    float: left;
    background-color: #eaf4f7;
    padding-left: 10px;
    padding-right: 10px;
}

As padding set the space within the width: 25%;, the margin set the space around the width: 25%;, so this makes the 25% a bigger value and the layout breaks into two rows

UPDATE

Using margins instead padding you can add width: calc(25% - 20px);, the first value is the width of the div and the second one is the sum of margin values

* {
  font-family: 'Roboto', sans-serif;
}

body {
  width: 1265px;
  display: inline-block;
  box-sizing: border-box;
}

main {
  margin: auto;
}

.centerContent {
  width: 75%;
  margin: auto;
  float: right;
}

.sidebar {
   width: calc(25% - 20px);
    height: 100%;
    margin-top: 10px;
    float: left;
    background-color: #eaf4f7;
    margin-left: 10px;
    margin-right: 10px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

code {
  width: 600px;
  font-family: 'Source Code Pro', monospace;
  color: #43892a;
  background-color: #000;
  display: block;
}

header {
  margin-left: 15px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #a72525;
}

<body>
  <header>
    <h1>Batch Documentation</h1>
  </header>
  <main class="clearfix">
    <div class="sidebar">
      <ul>
        <li>Test</li>
        <li>Test2</li>
        <li>Test3</li>
      </ul>
    </div>
    <div class="centerContent">
      <h2>Sample text</h2>
      <code>Hello</code>
    </div>
  </main>
</body>

But I need margin, not padding. I need a clear visual separation between the sidebar and the main content — Dasphillipbrau, Jan 27 '20 at 19:47
Thank you. Although I'm curious, what is wrong with the normal approach? The page's width is set at 1265px and shouldn't using percentages avoid that overflow? Like if it says the width of the sidebar is 25% of its parent, and the box sizing is in border box, shouldn't that calculate automatically how much should be margin, padding and content? — Dasphillipbrau, Jan 27 '20 at 21:32

Margins being added to the total width despite using box sizing

1 Answers1