Keeping background behind main floated content

i am working on a layout, that is 1 or two columns depending on which page is loaded. there is also a large repeating background that should be behind everything no matter what. when i try floating a column to make it a column, though, it continues on without the background (applied to a containing div).

how can i get around that?

basically i have

<div id="container" w repeating background>
<div id="left"></div>
<div id="sidebar"></div>

sidebar has a width and float right, left has a width and float left.

i’m getting it onto a server so i can show you the actual code (it’s wp so requires installation), but if there’s something obvious just looking at that… it’s a container of a container that has the bg as well… but i feel like that shouldn’t have an effect.

Try adding overflow hidden to the container. Fixed?

Hi, the parent is collapsing because a parent doesn’t recvognize floated elements. Adding overflow:hidden; to the container should force it to enclose the floated elmeents and un collapse the parent.

sweet! it was that easy. thank you :slight_smile: although i certainly wouldn’t have guessed that based on the name… i mean… i don’t see it hiding any overflow per se.
only other thing is now the floating columns continue past the containing div and on top of the footer… do i just need to give them a negative bottom margin the size of the footer probably?
(code is made intentionally skinny there to force it to go long and not quite up to date)

Contianing floats is sorta an unexpected effect of overflow…though I guess if you think about it, it sorta makes sense :). Kinda.

Are you trying to make a sticky footer? If you so forgot to give the border-top to the #headerwrap element (the one that matches the footers height)

There are other issues at play such as more overflows needing to be placed however :slight_smile:

yeah it should be a sticky footer… it’s working on all the other pages. i don’t recall a border-top… does it just have to have one? i’ll have to look into this…

i can’t find any reference to using a border-top declaration on the containing div for the non-footer of a sticky footer… so im not sure what to do with it. I’ve found a few other examples where floating columns don’t overlap the footer though and tried to apply the pertinent code to my situation, but I still must be missing something.

The border top is just one method to make space for the footer. I did mine with padding bottom on the h1 I didn’t look at your code, but in your case a div placed under your floated columns and above your footer with clear both and the hight of your footer should do it.

thanks eric, that did it. It seems a bit sloppy… random empty divs… but it does the trick.

i already had padding on my content div to push it up above the footer, which worked fine, just didn’t affect the floated stuff. shouldn’t the clear on the footer have affected those? or are does them being in separate divs keep that from happening?

Alternatively you could use padding bottom on the content div and clear the floats some other way. Possibly overflow hidden again. An empty div is no biggy though. Couple days you won’t even remember it was there.

Once you run some jquery on your site and see the massive amount of code the browser must read, then you realize one extra div (or a hundred) makes zero difference in browser speed.

“clear both on footer” umm… I don’t know depends. Would need to test it first.

If the container has overflow set (or some other clearing mechanism) and the footer is outside that element (as sticfky footers are) then clear:both isn’t needed :slight_smile: