Member Avatar for dbguide

:) Hey everyone,

Hows it going?

I have a prob with my css layout and I have fiddling around with it for 3 days and can't seem to understand why it looks great in IE and it lines up terrible in FF.

I kinda need a fresh set of eyes.

Here it is--

here is my css layout--

Basically my main div does not contain the divs that are inside it.

I know it has something to do with the "float control" but if you look at the header div the menu div fits perfectly

it could be the DIV { margin: 0px, auto; } which I think centers all divs ... but I am not sure

any suggestions would be fantastic!

:)

  • 2 Contributors
  • 3 Replies
  • 119 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jb1ker

Dani AI

Generated

Common cause: floated children are removed from normal flow so their parent collapses, and older IE behavior can hide that problem while Firefox shows it. described exactly that symptom and tried a couple of quick fixes with different trade-offs. The safest approach is to make the container establish a new layout context so it naturally encloses its floated children, instead of forcing a fixed height.

Practical options that work well today:

  • Use a modern clearfix (an invisible clearing pseudo-element) on the container so floats are cleared without extra markup. This is robust and keeps the container height automatic.
  • Use display: flow-root on the container to create a block formatting context (BFC). It is simple and supported by modern browsers.
  • As a fallback for very old IE, trigger its layout behavior (the historical "hasLayout" fix) so the parent contains floats.
  • If reworking the layout is feasible, switch to Flexbox or Grid. These layouts avoid float-related containment issues entirely and give better alignment control.

Debug checklist to apply while testing:

  • Validate the HTML for missing closing tags; stray markup can break rendering differently across browsers.
  • Use Firefox/DevTools to inspect computed heights, bounding boxes, and which element is actually collapsed.
  • Temporarily outline elements to see where floats start and end, and disable floats briefly to confirm they are the cause.
  • Ensure a standards DOCTYPE so browsers operate in standards mode rather than quirks mode.

Summary: try a clearfix or display: flow-root first (keeps variable height and is future-proof). If supporting very old IE, add the legacy layout hack only as a last resort.

Recommended Answers

All 3 Replies

Member Avatar for jb1ker

Hi dbguide

Pff. No easy assignment there.

I think I solved it. It had to do with the 'overflow: hidden' attribute. Delete it.

The height of your page in FF will not be ok. Fix it by setting a 'height: 520px' and 'max-height: 520px' attribute. Play with the numbers 'till your satisfied.

Let me know how that works out for ya.

Greetz J.

Member Avatar for dbguide

Hi jb1ker,

thanks for your help, however I think the css file you were looking at actually have updates that have fixed the problem. Another designer from another forum told me that the overflow:hidden attribute would solve my problem.

I did try your method of setting a static height but it becomes difficult when applying to all pages.

However the overflow attribute actually helps contains the floating divs inside the main div. I never had encountered this before. Funny enough.

Thanks for the advice though. I really appreciate it.

Hi dbguide

Pff. No easy assignment there.

I think I solved it. It had to do with the 'overflow: hidden' attribute. Delete it.

The height of your page in FF will not be ok. Fix it by setting a 'height: 520px' and 'max-height: 520px' attribute. Play with the numbers 'till your satisfied.

Let me know how that works out for ya.

Greetz J.

Member Avatar for jb1ker

dbguide

ok. that's the interesting part about it. you never stop learning or exploring. Good luck.

J

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.