Member Avatar for Ryugen

Hi there,

I'm currently building a website for an online radio station, and I'd rather not have it look bad when it finally gets on the air (understandably). The main problem I'm having is that a div I have to put a background around the main section of content and menus doesn't extend all the way down the content like in Firefox like it does in IE.

The website is

The two divs within the area I wish to have a background for are float'd, one to the left, one to the right. I realise one way to fix this could be by using tables, but I'd rather avoid them unless absolutely necessary. The other problem is that a section at the bottom of the page (the site credits) doesn't have the background around it (which is the same class as the one around the content). I realise this is the same problem preventing it from displaying correctly.

If someone could take a look at the site in both IE and Firefox, take a look at the source code, and tell me any ideas they can think of to extend the background, I would be most grateful.

Regards,
Ryugen

  • 4 Contributors
  • 4 Replies
  • 123 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

The symptom describes (background not running down around two floated columns in Firefox but appearing fine in IE) is the classic “floats taken out of flow” problem. Firefox follows the spec and a parent that contains only floated children will collapse to zero height; older IE builds behaved differently because of the nonstandard hasLayout behavior, which is why saw the discrepancy.

Three practical fixes (pick one that fits the design):

  • Use a clearfix on the parent (best general solution). Add a class to the wrapper and include this CSS:
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

  • Give the parent a new block formatting context. Quick options:

    .container { overflow: auto; }   /* or overflow: hidden; */

    Caveat: overflow: hidden can clip absolutely positioned children or drop-downs; auto may show scrollbars.

  • Use modern layout or flow-root:

    .container { display: flow-root; }   /* modern, clean */

    Or convert to flexbox for a two-column layout:

    .container { display: flex; }

Troubleshooting tips: as suggested, outline elements with your browser devtools to confirm which boxes have height. Check that the credits markup is actually inside the wrapper (a misplaced closing </div> will produce the exact effect you described). Also watch for margin-collapse on the first/last child — adding a tiny padding, border, or using any of the fixes above will stop it.

Avoid switching to tables unless you need their behavior for a specific legacy reason; clearfix or flow-root/flexbox are cleaner, semantic, and responsive-friendly.

Recommended Answers

All 4 Replies

Member Avatar for Agent Cosmic

I've got the same error, too, and no one I asked seems to be able to solve this. One way you can solve this is by using table (I think).

Member Avatar for buddylee17

Read . Also, if you'll download the Firefox Web Developer addon, it will allow you to outline elements and you can compare the outline to where you think the element should be.

Member Avatar for Ryugen

Thanks for the advice guys.

Lee; the reading was interesting, but I'm afraid it didn't help much. I've been using Firebug to take a look at the page to try and figure out why it isn't displaying correctly, but that hasn't shed any light on the situation.

Cosmic; yea, sadly this may be my only option. Oh well, I'll try a table and see if it makes any difference.

Member Avatar for MidiMagic

The problem is trying to make a page that exactly fills a screen.

The internet specifications do not have this kind of page defined as a possibility. A web page is supposed to start at the top and grow downward as far as the content needs.

Firefox follows the standards, IE does not.

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.