[Solved] Footer border not level across entire page width

[mrhines1]

I have a footer on my site and would like to apply a border across the top of it to help visually separate it from the site. The footer background stretches across the entire screen (outside of the grid). When I apply the border it doesn’t make a straight line, instead it drops down about 5px compared to the content inside the grid.

CSS

html { overflow-x: hidden; }
.footer { 
  background: black;
  color: white;
  padding: 15px 0;
  position: relative;
  margin-bottom: 0;
  margin-top: 30px;

}
.footer:before, .footer:after {
  content: "";
  background: black;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9999px;
}
.footer:before {
  right: 100%;
}
.footer:after {
  left: 100%;
}

.footer:nth-of-type(1), .footer:nth-of-type(1):before, .footer:nth-of-type(1):after { background: #323235; border-top: 5px solid #f66b0e; }

[Paulie_D]

Could you make a Codepen or provide a live link?

I don’t think the border width and the issue you speak of are coindecental.

[mrhines1]

Here’s the pen

@jurotek, I do have the margin set to 0; on the body, but I even have the issue in the pen without defining the body’s margin so would that eliminate that as in issue?

[Paulie_D]

You need to position the pseudo element to take account of the border adding height to the footer.

.footer:before, .footer:after {
  content: "";
  background: black;
  position: absolute;
  top: -5px;   /* same as new border */
   bottom: 0;
  width: 9999px;
}

[mrhines1]

@Paulie_D, thanks! That did it.

Is there any way to prevent the browser from being able to scroll to the right? I’m sure it’s because of the width:9999px; (it wasn’t an issue before adding that).

Would it be possible to base that number on the width of the browser window or would that have to be a javascript fix?

[Paulie_D]

If you read Chris article he mentions that: https://css-tricks.com/full-browser-width-bars/

We need to be careful with our super wide extensions here, don’t want to cause horizontal scroll. The safest way to do this (thanks, Dave Gregory) is to hide the overflow-x on both the html and body elements. This hides them visually and ensures you can’t force-scroll your way over to them.

html, body {
    overflow-x: hidden;
}

[Author]

Posts