CODEWITHSUNDEEP
htmlcssoverflowcss-grid
Sam
Sam

Reputation: 765

CSS grid with padding overflows container

I am trying to create a footer whose width is 100% (of the body). On the left side of the footer, I want a logo. On the right side of the footer, I want some text. So I decided to try to use CSS grid.

This is almost exactly what I'm going for:

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  grid-template-columns: 30% 70%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}
<div class="footer">
  <div class="footerGridLogo"></div>
  <div class="footerGridQuestions"></div>
</div>

However, I want to add some padding to the left of the grid, let's say 10%, so that the logo isn't so close to the left edge. So instead of a 30-70 split, I try a 10-25-65 split. However, the grid ends up overflowing. Why is that?

Demonstration of the issue:

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  padding-left: 10%;
  grid-template-columns: 25% 65%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}
<div class="footer">
  <div class="footerGridLogo">
  </div>
  <div class="footerGridQuestions">
  </div>
</div>

I realize that just adding another grid item of 10% instead of padding solves my problem, but I'm curious why padding doesn't work the same way.

Upvotes: 27

Views: 29154

Answers (8)

Bucket
Bucket

Reputation: 651

I had some misbehaving right hand space between a grid area and the grid container.

Altering "box-sizing" did not work for me.

It would take up too much space when there was sufficient room for the contents. When a scroll was forced by large content it would take up no room at all. So i either had an oversized empty space or no space between my grid area and the containing grid.

In the end I had to use the most heinous of CSS, a negative margin.

.a-grid-container {
    /*padding-right:15px; this was not honoured*/
    padding-right: 0px;
}

.a-grid-area-on-the-right {
    padding-right:15px;
    margin-right:-15px;
}

I do not know why this works, just that it solved my specific problem.

Upvotes: 0

Artur M&#252;ller Romanov
Artur M&#252;ller Romanov

Reputation: 5841

None of the answers helped me with my problem. My grid would screw up the grid-width if I added padding. The only thing that helped me was to create a padding div inside the grid columns around the grid content:

<div class="grid">
  <div class="pad">
    content...
  </div>
</div>

<style lang="scss">
.grid {
    display: grid;
    .pad {
      padding: 1vw;
      content-styles...
    }
</style>

Upvotes: 1

anayarojo
anayarojo

Reputation: 1205

I fixed css-grid / padding problems adding next code to css:

*, *::before, *::after {
  box-sizing: border-box;
}

Upvotes: 3

user7909000
user7909000

Reputation:

When you do padding of an HTML element it displaces the content (actually creates space) with respect to its border enter image description here

When you do 10% padding-left to your footer, the content displaces by 10% from the left border. But you have 25% and 65% grid ratio which totals to 90%. The rest of 10% is background.

To resolve this issue use a ratio of 25% and 75% or any ratio which totals to 100%. Still the padding will cause the total width to overflow by 10%. So set the width of the footer to 90% that must resolve the overflow problem.

.footer {
	background-color: #2D1975;
	width: 90%;
	height: 350px;
	display: grid;
    padding-left:10%;
    	grid-template-columns: 25% 75%;
    }
    
    .footerGridLogo {
    	background-color: red;
    }
    
    .footerGridQuestions {
    	background-color: green;
    }
<div class="footer">
  <div class="footerGridLogo">
  </div>
  <div class="footerGridQuestions">
  </div>
</div>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 372059

First, instead of using percentage units use fr units. These units represent leftover space and are factored in after fixed lengths (such as padding) have been rendered.

So instead of this:

grid-template-columns: 30% 70%

Try this:

grid-template-columns: 3fr 7fr

More details:

Second, remove the width: 100% on the container.

.footer {
  background-color: #2D1975;
  width: 100%; <---------- remove
  height: 350px;
  display: grid;
  padding-left: 10%;
  grid-template-columns: 25% 65%;
}

When you set the .footer to display: grid it becomes (or remains) a block-level element. Such elements automatically occupy the full width of the parent.

However, if you add width: 100% to a block-level element it then adds any padding, margin and border to the calculation, resulting in an overflow. So just remove it.

Third, this whole problem can be avoided if you add the padding-left to the logo itself, and not to the grid container or grid item.

Upvotes: 38

sol
sol

Reputation: 22959

This is box-sizing.

The default value is content-box, which means that padding and border values are added to the width.

You can change this to border-box, which includes padding and border in the width.

Here is a common approach, from this article:

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  padding-left: 10%;
  grid-template-columns: 25% 65%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}
<div class="footer">
  <div class="footerGridLogo">
  </div>
  <div class="footerGridQuestions">
  </div>
</div>

Upvotes: 13

Johnny Ngo
Johnny Ngo

Reputation: 104

Have you ever tried to remove this line

    width: 100%;

from your CSS code?

Just try and see the result.

Upvotes: 1

sjdm
sjdm

Reputation: 589

You are padding 10% left of the div and then assigning the width to be 100% this is causing a %110 total including the padding.

Pad in the div above the footer and assign the contents of the child div to 100%

.container {
  padding: 10px;
}

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  grid-template-columns: 25% 65%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}

<div class="container"> 
  <div class="footer">
    <div class="footerGridLogo"></div>
    <div class="footerGridQuestions"></div>
 </div>
</div>

Upvotes: 0

Related Questions