Member Avatar for thanasisdev

Hello

I have finished coding my site but i have a small problem.
In the main page http://nik.itcreations.eu/gr/index.php the footer div collides with the the previous div. I would like to have some space between these two divs. I have tried to use the margin tag with no success.

Your help will be much appreciated

  • 2 Contributors
  • 2 Replies
  • 94 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by thanasisdev

Dani AI

Generated

This is a classic layout question — vertical spacing between block elements can behave unexpectedly because of collapsing margins, floats, positioning, or HTML errors. was right to flag inheritance and the console error: check computed styles and the browser console first, since a script that modifies classes or DOM can change layout at runtime.

Quick checklist to diagnose

  • Inspect the two elements in the browser inspector and view the computed box model (margins, padding, position, float).
  • Look for position: absolute or floats that remove elements from normal flow.
  • Check for margin collapsing between adjacent block-level elements.
  • Validate the HTML (unclosed tags can break layout) and fix any console errors that might stop layout scripts.

Practical fixes (pick one that fits your structure)

  • Create a new block formatting context on the parent/footer (modern: display: flow-root; fallback: overflow: auto).
  • If floats are involved, clear them (add clear: both or use a clearfix).
  • Use display: flex on the container so children no longer collapse margins.
  • Avoid absolute positioning for in-flow footers unless intended.

Example CSS options:

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

/* modern BFC */
footer {
  display: flow-root;
}

For background reading, review how margins collapse and how block formatting contexts work on MDN: Mastering margin collapsing and . As reported, the page was fixed after addressing the layout; the steps above will help diagnose similar cases in other projects.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

I think it has to do something with inheritance of css properties, because if you change the padding-top of footer to 1px, the whole thing shifts down.

I also get a javascript error.

Member Avatar for thanasisdev

Thanks for your notices.
I actually fixed some errors and used padding-top 5px on footer and everything is ok now.

Problem solved

Edited by thanasisdev because: n/a
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.