Member Avatar for sfadelta

I am new to CSS layouts, so this is probably a really dumb question. I know this is a common problem, but for some reason I cannot find the simple code to fix it: When using a one column fixed layout with header and footer, I have a blank space about 20 pixels tall below my Spry menu I inserted and above my footer. It has nothing to do with margins or paddings, I have check that already. I thought it had something to do with clearfloats, but can't seem to get those to fix the issue.

When I first started playing around with CSS layouts, I ran across a simple line of code to fix this issue, but now I can't find it. Help please.

  • 3 Contributors
  • 2 Replies
  • 126 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by kavithakesav

Dani AI

Generated

A short, practical checklist and a few small CSS fixes that usually stop the “mystery 20px” gap under a list-based nav (like a Spry menu). asked for the simple line of code — several possible causes exist, so try the diagnostic steps first and then the minimal fixes below. and asked for code; sample snippets follow.

Start by diagnosing with the browser inspector: hover the menu and footer in DevTools to see their box outlines, examine the computed values for margin-bottom, line-height, and any :after/:before pseudo-elements, and temporarily add an outline to every element to spot which box creates the gap:

  • Toggle display: none up the DOM from the footer to isolate the element producing the space.
  • Look for floated children that aren’t enclosed by their parent (collapsed parent height).
  • Check for inline/inline-block elements or images that leave baseline gaps.

Common minimal fixes (apply only those that match what the inspector shows):

/* reset list spacing */
ul { margin: 0; padding: 0; list-style: none; }

/* clearfix for a container that holds floats */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* force footer below floats if floats remain */
footer { clear: both; }

/* remove baseline gap for inline-block items or images */
.menu li { display: inline-block; vertical-align: top; }
.menu img { display: block; }

Alternatives and cautions: setting a parent to overflow: auto or hidden will also contain floats but can clip shadows; using font-size: 0 on a parent removes inline-block whitespace but requires restoring child font sizes. If the inspector shows a pseudo-element adding height, remove or reset its line-height or content. For background reading on inline-block spacing and clearfix patterns see Fighting the Space Between Inline-Block Elements and the clearfix snippet.

Recommended Answers

All 2 Replies

Member Avatar for rudevils

it's better if u show ur code first sfadelta

Member Avatar for kavithakesav

Provide u r code so that we can give exact solution.

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.