My div's dont stack as I want them to

[james_d_kelly]

I have a series of div's that layout my web page. I have tried to keep the code compatible with all browsers but have come accross a problem. I have tested the site in MSIE-7 and all appears fine but when i test it in FF the footer div stacks up with the header div and coveres up the middle div. Why doesnt the footer stake up with the middle div as you would expect. The order the divs should stack is: header, middle, footer. It could be something really simple but I just dont know why its not stacking as i expected.
Any help would be greatly appriciated.:)

This is my site if you want to see the error: www.gardenballistics.co.nr

My basic html code is:


<div id="header">
<div id="title">
Site title
</div>
</div>

<div id="middle">
<div id="nav">
navigation
</div>

<div id="content">
content: containing auto sizing iframe
</div>
</div>

<div id="footer">
footer image
</div>




And here is my CSS code:


body {
width: 98%;
overflow-x:hidden;
margin: 5px 0 0 0;
padding: 0px;
background-color: #474747;
}

#header {
position: relative;
left: 50%;
margin-left: -380px;
width: 761px;
height: 99px;
border-style: solid;
border-width: 0 0 0 0;
background: url(graphics/header.jpg);
background-repeat: no-repeat;
}

#title {
position: relative;
top: 33px;
left: 280px;
width: 442px;
height: 44px;
border-style: solid;
border-width: 0 0 0 0;
background-color: transparent;
}

#middle {
position: relative;
left: 50%;
margin-left: -380px;
width: 761px;
border-style: solid;
border-width: 0 0 0 0;
border-color: #000000;
background-color: #3F5268;
background: url(graphics/sidenavbg.jpg) repeat-y 0 0;
}

#nav {
float: left;
position: relative;
top: 10px;
left: 1px;
width: 125px;
border-style: solid;
border-width: 0 0 0 0;
background-color: transparent;
}

#content {
float: left;
position: relative;
top: 10px;
left: 30px;
width: 575px;
border-style: solid;
border-width: 0 0 0 0;
background-color: transparent;
}

#footer {
position: relative;
left: 50%;
margin-left: -380px;
width: 761px;
height: 99px;
border-style: solid;
border-width: 0 0 0 0;
background: url(graphics/footer.jpg);
background-repeat: no-repeat;
}

[Centauri]

Try clear:both in the footer css.

Frames - yuck......

[WebJoel]

I Stumble!d your page a few months ago... kewl.

[james_d_kelly]

Thanks Centauri, i hope that has worked! Is it possible for someone to check my site in FF or any other browser to see if this has solved the problem?

Thanks again, James

[WebJoel]

Firefox 2.x.x.x

[james_d_kelly]

Thanks for the graphic! I think the footer is stacking properly now as it is not on top of the title, but the middle div doesn't appear to load its background colour or background image - is the div some how invalid and therefore ignored?

Thanks for any help in advance. :)

[Centauri]

The 50webs domain redirect using the frame is making this difficult to analyse - could you tempory remove the bit of javscript just before the style tag so we can view the page on its own without it redirecting to the frame version?

[james_d_kelly]

Ok ive removed the redirect script on the index.html page and the home.html (loaded in iframe) pages.

The index page is at this address:

http://gardenballistics.50webs.com/index.html

Thanks :)

[Centauri]

Ah, yes, that has made it much easier, thanks.

The main problem with the background is the floated contents not being cleared, and therefore the #middle div is not actually enclosing the floats.

Fixing up a few other issues also solves the float problem. The proper method of horizontally centering a div with a set width is to use auto side margins. With that applied to the #header, #middle and #footer divs, there is no need for the reduced body width or hidden x overflow. The relative positioning of those divs is also then not required. I used padding within the #header div to position the #title div, therefore negating the relative positioning here, too. Top padding on the #middle div can space all the contents from the top. Instead of floating the #content div, I removed the width and applied a left margin big enough to clear the floated #nav div + 30px. As the #content div is no longer floated, the #middle div encloses it properly, thereby displaying the background graphic.

Here is the changes I made to the divs' styling :body {
padding: 5px 0 0;
margin: 0;
background-color: #474747;
}

#header {
margin: 0 auto;
width: 481px;
height: 66px;
border-style: solid;
border-width: 0 0 0 0;
background: url(graphics/header.jpg);
background-repeat: no-repeat;
padding: 33px 0 0 280px
}

#title {
width: 442px;
height: 44px;
border-style: solid;
border-width: 0 0 0 0;
background-color: transparent;
}

#middle {
margin: 0 auto;
width: 761px;
border-style: solid;
border-width: 0 0 0 0;
border-color: #000000;
background-color: #3F5268;
background: url(graphics/sidenavbg.jpg) repeat-y 0 0;
padding: 10px 0 0;
}

#nav {
float: left;
width: 125px;
border-style: solid;
border-width: 0 0 0 0;
background-color: transparent;
}

#content {
margin: 0 0 0 155px;
border-style: solid;
border-width: 0 0 0 0;
background-color: transparent;
}

#footer {
clear: both;
margin: 0 auto;
width: 761px;
height: 99px;
border-style: solid;
border-width: 0 0 0 0;
background: url(graphics/footer.jpg);
background-repeat: no-repeat;
}

[james_d_kelly]

Thats brilliant! Thank you!

I initially used that strange method of postioning the div's centraly to get round the bug in MSIE-6, but it appears to have been fixed in MSIE-7.

Just to get things right you say my "floated contents are not being cleared" in general what does it mean when you clear a float and how is this done (hope this isnt a silly question :o ), as i have come accross problems like this before and i need to understand what i am doing wrong.

Oh and another thing, i think i have the wrong doctype - im completly baffeled as to how i am supposed to work out which one to use. This is what i have at the moment:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Is it possible to get another screen shot in FF?

Thanks again!!!!! James

[WebJoel]

In a nutshell, if a DIV has style="float:left;" and the next element is also "float:left;" , it will be 'to the right of' the first floated DIV. If you want the second element 'on the left of the browser window, not to the right of the floated DIV', you 'clear' the float:

A somehwhat bloaty way, is another empty DIV:

<div style="clear:left;"><!-- --></div>

I usually say "clear:both;" if it does no harm (assuming that there have been no "float:right;"s used). And I also like putting in an 'empty !comment' to help with Validation, which seems that this is expected.

<div style="width:100px; height:100px; background-color:red; float:left;"></div>
<div style="width:100px; height:100px; background-color:green; float:left;"></div>
<div style="width:100px; height:100px; background-color:teal; float:left;"></div>

<div style="clear:both;"><!-- --></div>

<div style="width:100px; height:100px; background-color:teal; float:left;"></div>
<div style="width:100px; height:100px; background-color:red; float:left;"></div>
<div style="width:100px; height:100px; background-color:green; float:left;"></div>
Six floats, with a (non-semantic clearing-float which sends the NEXT loat:left to the edge of the container, here, the screen).

Firefox Screengrab attached:

[Centauri]

The auto side margin method of centering works fine in IE6 as long as you have a complete and valid doctype.

A good article about floats, including clearing, by Paul O'Brien can be seen here (http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15).

A screen shot in FF 1.5 can be seen here (http://img408.imageshack.us/img408/3475/gardenballisticsffys7.jpg).

[james_d_kelly]

Ah I see quite simple really! I think i get it now, thanks for the info.

There is another query i have that i thought id ask you as you may be familliar with my code:

I think i have the wrong doctype and im completly baffeled as to how to work out which one to use. This is what i have at the moment:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Thanks again, ragards, James

[WebJoel]

That !doctype is at least better than no !doctype (which sends IE into quirks mode).

'New builds' should try to use html 4.01 strict, -or even transitional at least if they still contain some deprecated tags:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> I am rather fond of this one though: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> mostly because of my habit of 'implicitly-closing' tags, like "<br>" is closed as "<br />", "<img src="#">" is closed as "<img src="#" />".

Upon W3C-Validation though, this one gets parsed a little harder than 'html 4.01 transitional', as it should be.

[Centauri]

I always use html 4.01 strict myself<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">