Fluid design not working in FF

[moriax]

CSS design is making me pull out my hair in frustration. Now after much work I got it working in IE. But not in FF. And this means my code is terribly wrong, because FF is the browser that rules.

If you can, please view in both IE and FF and explain to me why it dosn't look the same in FF.

[test.jimmysvensson.se ]

My css code is the following:

html,body {
margin: 0px;
padding: 0px;
background-color: white;
}
#bodyframe {
width:940px;
margin: 0px auto;
background-color: blue;
border: 2px solid black;
}
#shadow {
width:740px;
margin: 0px auto;
float:left;
min-height: 100%;
background-color: black;
}
#right {
width:100px;
margin: 0px auto;
float:right;
height: 100%;
background-color: grey;
}
#topright
{
width: 100px;
height:100px;
margin: 0px auto;
background-color: green;
}
#ad
{
width: 100px;
margin: 0px auto;
border: 1px solid gray;
line-height: 130%;
height: 100%;
background-color: white;
}
#container
{
margin: 0px auto;
width:700px;
height: 100%;
background-color: orange;
}
#header
{
width: 700px;
height:200px;
padding:0px;
margin: 0px auto;
background-color: #ddd;
}
#menu
{
width: 700px;
height:150px;
margin: 0px auto;
border: 1px solid gray;
line-height: 130%;
height: 100%;
background-color: red;
}
#main
{
width: 700px;
margin: 0px auto;
border: 1px solid gray;
line-height: 130%;
height: 100%;
background-color: blue;
}
#footer
{
width: 700px;
margin: 0px auto;
border: 1px solid gray;
line-height: 130%;
height: 100%;
background-color: yellow;
}

The html layout is:

<div id="bodyframe">
<div id="shadow">
<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div id="main">
</div>
<div id="footer">
</div>
</div>
</div>
<div id="right">
<div id="topright">
</div>
<div id="ad">
</div>
</div>
</div>

[Fotiman]

Looks basically the same to me, except for the blue background... what exactly is the problem?

[Fotiman]

I'm guessing your upset because the outer container does not "contain" the floated items, which is the correct behavior. If you add something that clears the floats at the bottom (but still within the container), then it should look the same in both IE and FF. Alternatively, you could float the container, which would cause it to "contain" the inner floats, but that may mess with your attempts to center it.

[moriax]

You are absolutely right fotiman. It is the problem of the outer container not "containing" all the other elements. That, and the header won't be at the absolute top of the screen.

I tried adding "clear" to some divs within the container but dosn't seem to get it right. Any clue on where to put it.

And yes, FF is right and my code is wrong. That I understod the second it seemed to work in IE :)

[moriax]

Hey!

<br clear="all" />

it did the trick when put right before the end </div> tag of the outer container.

But still the header is located a bit down from the top screen. Why? And how do I get it to the top?

[Fotiman]

It's probably padding or margin on your h1. Try adding this:

h1 { margin: 0; padding: 0; }

[doodlebee]

Just sayin'...

>><br clear="all" /> <<

should be <br clear="both" />

clear="all" isn't a valid attribute for clearing floats. Also, the syntax for the clearing is incorrect.

You shouldmake it simple, and just stick in the br tag like so:

<br class="clear" />

and in the stylesheet:

br.clear {
clear:both;}

That should validate and degrade well.

[moriax]

Argh, offcourse! Tried the margins,paddings on all the divs without notising the h1 tag. Thanks! I feel so stupid.

And thanks doodlebee for the remark on the code. Your right, and I fixed it.

Now, I will continue my work until the next problem comes along :-)