Backgrounds and Floats

just don't get it

[humpg]

I am working on a site that is all CSS (my first i might add) and I am having problems getting a background to appear in one layer that contains two more layers that are floated.

I have three main containers header, body and footer. Within the body I have a menu that has two layers one floats left and contains a navigation menu and the other floats right containing my main content. The main body layer has a background that tiles but because these two layers are floated it won't show up in Firefox or Mozilla (everything else is fine). I have tried several tips from google and this forum but it still won't seem to work. Is there something I am missing or just don't understand?

Here is my css:

Main Body Container:

#ed_maincontent {
position: relative;
z-index: 2;
width: 750px;
top: -36px;
height: auto;
}

Left container holding Menu:

#product_menu_container {
position: relative;
float: left;
z-index: 2;
width: 184px;
top: 13px;
margin: 0px;
padding: 0px;
clear: right;
}

Right container holding content:

#main_content_container {
position: relative;
float: right;
z-index: 1;
width: 532px;
top: 16px;
left: -17px;
margin: 0px;
padding: 0px;
clear: right;
}

My background is coded inline:

<div id="ed_maincontent" style="background-image: url(images/ed_layout/ed_main_grid_bg.jpg); layer-background-image: url(images/ed_layout/ed_main_grid_bg.jpg);">

Will that make a difference if it is not in the stylesheet?
* for some reason when i put my backgrounds in the stylesheet they wouldn't show up

These two floated layers contain layers within them, not sure if they are affecting it as well.

[jetboy_70]

When you float an element, you take it out of the document flow. Therefore it can no longer influence the dimensions of its container. When you float both #product_menu_container and #main_content_container you are essentially taking them out of #ed_maincontent. Consequently #ed_maincontent collapses to zero height (after all, it's not containing anything anymore) and your background disappears.

The workarounds for this behaviour are discussed here:

[webmasterworld.com ]

[jetboy_70]

Are you using an external stylesheet in a subdirectory? Try changing the path to your graphics to make your backgrounds display when they're declared in your stylesheet. i.e.

Not images/ed_layout/ed_main_grid_bg.jpg

but

../images/ed_layout/ed_main_grid_bg.jpg

or simply

/images/ed_layout/ed_main_grid_bg.jpg

[createErrorMsg]

Is there something I am missing or just don't understand?

Yes, but don't feel bad! It's a part of the float specs that makes sense when you thinking terms of flaoting images within text, but isn't quite so obvious when floating layout boxes.

The float property causes an element to lift out of the flow, meaning that it doesn't interact with other elements any more. One result of this is that the float cannot have an effect upon it's container's size. With two floated divs, your container doesn't know it has anything in it (no in-flow elements) and so it snaps shut, taking it's background with it.

Solution 1: a clearing div
What you need to do is force the container to contain the floats. One way to do this is to add a clearing element AFTER the floats...

html:
<div class="clear"></div>

css:
.clear{
clear:both;
}

The clear on this div will cause it (the clear div) to have a top margin as tall as the tallest floated element before it in the source code, and because it is in-flow, it forces the container down.

The problem here is that not all browsers handle the clear property properly, and in some cases clearing the layout divs will also clear the divs inside of the layout. Plus a clearing div is extra markup, semantically incorrect...there's a better, and easier way.

Solution 2: float the container
The specs state that if a container is floated, it will expland to contain any floated children. So if you apply a float property to the container itself, you're golden. Make sure it has a width, too, or IE will snarkle the layout.

The reason (if you care) that your background shows up in IE, but not Moz/FF, is that IE improperly handles floats by automatically enclosing them in their containers. This is handy in some situations, but is actually a spec violation and prevents us from doing all sorts of things with the float property that the float property was intended to do.

Anyway, that's long winded answer when just a short was needed: apply a float to the container and you'll be fine.

cEM

[added]jetboy beat me to it ;)[/added]

[humpg]

Kudows too you too,

Problem solved, thanks a bunch.

However, just one browser left, in Netscape 6 my footer has now moved up directly below my header and underneath my main body. Is there some sort of hack that needs to be done to get this to work in NN6 or is this just another simple CSS issue.

* Well it also got destroyed in NN4 but I wasn't going to worry about that, maybe just detect the browser and give them a link to update. Is NN4 in much use anymore to have to worry about?

[jetboy_70]

Can you post your code again so we can see which way you're clearing the floats?

[createErrorMsg]

You probably need to add...

clear:WHATEVER; /*left if the container floats left, right if the container floats right*/

...to your footer. But do as jetboy says anyway and post the code so we can see what exactly is going on.

To answer your question: getting NN4 to cooperate with CSS is like getting a lion to wear a tutu. Not only nearly impossible, but probably not worth the effort even if you could pull it off.

[humpg]

Here are all the containers in there order:

#wrapper {
padding: 0px;
width: 740px;
height: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

Header:

#ed_header {
position: relative;
z-index: 3;
width: 750px;
top: 3px;
height: 188px;
background-repeat: no-repeat;
background-image: url("../images/ed_layout/top_hdr.jpg");
}

Main Body Container:

#ed_maincontent {
position: relative;
z-index: 2;
float: left;
width: 750px;
top: -36px;
height: auto;
clear: right;
background-image: url("../images/ed_layout/ed_main_grid_bg.jpg");
}

Next two are located within the Main Body container:

Menu floated Left:

#product_menu_container {
position: relative;
float: left;
z-index: 2;
width: 184px;
top: 13px;
margin: 0px;
padding: 0px;
clear: right;
}

Content holder floated right:

#main_content_container {
position: relative;
float: right;
z-index: 1;
width: 532px;
top: 16px;
left: -17px;
margin: 0px;
padding: 0px;
clear: right;
}

Footer:

#ed_footer_container {
position: relative;
z-index: 1;
width: 750px;
height: 112px;
top: -36px;
}

I also noticed that in opera there is a space that comes between the Main body container and the footer. If I float the footer that goes away and but then the same problem appears in IE.