Member Avatar for mattyd

Hello.

Having some trouble figuring out a CSS footer issue.

The footer should fill the page fully, not extend a horizontal scrollbar and importantly, not have a 3-5 pixel left gap.

I've tried all I know to fix this.

Here is the CSS for this:

footer
{
float: left;
min-width:100%;
padding:40px;
background-color:#c81818;   
margin:0px;
font-family:"Trebuchet MS",Helvetica, sans-serif;
color:#ffffff;
font-size:16px;
}

Please view the link below to see it live.

*Note: This is only a landing page for SEO-bots until the main site is built - It's not fancy or pretty

Thank you in advance!
Matthew

  • 2 Contributors
  • 2 Replies
  • 183 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by mattyd

Dani AI

Generated

Short summary for future readers: the tiny left gap comes from the browser's default page margin, and the horizontal scrollbar was caused by forcing the footer to be 100% wide while also giving it horizontal padding. As noted, resetting root margins fixes the gap; additionally, avoid combining a full-width rule with extra padding unless you use the border-box box model or remove the float/min-width approach.

A compact, robust pattern that prevents overflow and keeps a footer at the bottom when content is short (sticky footer) is shown below:

/* reset and use border-box so padding doesn't increase element width */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

html, body { margin: 0; padding: 0; height: 100%; }

/* simple sticky-footer layout */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

footer {
  width: 100%;
  box-sizing: border-box; /* keeps padding inside width */
  padding: 2.5rem;        /* horizontal padding won't cause overflow */
  background: #c81818;
  color: #fff;
  display: block;
}

Quick troubleshooting checklist: open DevTools, inspect the footer and the root elements, and check the computed box model (margins, border, padding, width). Search your CSS for min-width:100%, float:left, or explicit width:100% and remove/replace them with the pattern above. Avoid overflow-x:hidden as a primary fix—it hides symptoms rather than addressing the layout math.

Credit: was right to point out the body margin; glad to see resolved it. This approach also improves responsiveness and makes future layout tweaks safer.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

Hi Matthew,

its a good idea to apply a "CSS Reset" so that you user agent's default styles dont apply. This will give you a more consistent display across different browsers....

So, if you apply a margin:0 to the body element, it will get rid of the left space.

Also, the extention on the right is a result of adding 40px of padding to the footer element.

Edited by JorgeM
commented: Thank you, Good Sir! Always of great help. +7
Member Avatar for mattyd

All fixed.

Thank you, JorgeM.

Matthew

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.