Firefox 2.0 CSS???

[bluewalrus]

Is firefox 2.0 displaying css different than other browsers or have i scripted my page wrong everything i've looked at it says I have the css right except for the way the page looks in the middle right of this page you'll see last write as an h2 heading which is suppose to be floating to the right right above the redbox. Which it does in safari, internet explorer 5.2,(newest version i can get for mac), and dreamweaver design view. Anyone know why the h2 is shooting to the left in firefox though? The box is contained in the same div. http://www.luigihip.com/blog.html

Html:

<div id="contain">
<div id="right">
<div id="nav">
<div id="links"><a href="blog.html">So Yesterday</a> <a href="">Photo</a> <a href="video.html">Video</a><br /><a href="">Shirts</a> <a href="index.html">Home</a> <a href="">Contact</a>

</div></div>
<div style="float:right;">
<h2>the last write</h2><br />
<div id="red"></div>
</div>
<div id="blog3">

Css:

@charset "UTF-8";
/* CSS Document */
html,body {
background:#000000;
background-color:#000000;
}
#contain {
margin:auto;
border:0;
width:1000px;
background:url(bg.png);
background-image: url(bg.png); 
background-repeat:repeat;
}
h1 {
font-size:150px;
font-weight:bolder;
display:inline;
line-height:1;
font-family:Arial, Helvetica Bold, sans-serif;
}
#left {
text-align:center;
width:250px;
height:685px;
background-color:#FFFFFF;
background-image:none;
font-family:Georgia, "Times New Roman", Times, serif;
}
#right {
float:right;
width:645px;
height:685px;
background-color:#FFFFFF;
background-image:none;
font-family:Georgia, "Times New Roman", Times, serif;
}
h2 {
font-size:50px;
font-weight:bolder;
display:inline;
font-family:Arial, Helvetica, sans-serif;
}
#nav {
float:left;
width:645px;
height:213px;
background-image:url(nav.png);
background-repeat:no-repeat;
}
#links {
padding-left:20px;
padding-top:55px;
height:150px;
width:375px;
line-height:1.8;
}
#links a {
padding-top:4px;
padding-bottom:4px;
padding-left:12px;
padding-right:12px;
height:25px;
background-color:#FFFFFF;
background-image:none;
text-decoration:none;
font-size:20px;
color:#000000;
font-weight:bolder;
}
#links a:hover {
background-color:#000000;
color:#ffffff;
}
#red {
float:right;
background-color:#FF0000;
height:20px;
width:75px;
}
#blog h3 {
font-size:20px;
display:inline;
}
#blog {
font-size:14px;
padding-left:20px;
padding-top:205px;
}
#blog p {
padding-left:10px;
font-size:14px;
overflow:auto;
}
#blog2 h3 {
font-size:20px;
display:inline;
}	
#blog2 {
font-size:14px;
padding-left:20px;
padding-top:275px;
}

#blog3 {
font-size:14px;
padding-left:20px;
padding-top:205px;
}
#blog2 {
font-size:14px;
padding-left:20px;
padding-top:205px;
}
#blog2 p {
padding-left:10px;
font-size:14px;
overflow:auto;
height:350px;
}
#blog3 h3 {
font-size:20px;
display:inline;
}	
#blog3 {
font-size:14px;
padding-left:20px;
padding-top:275px;
}
#blog3 p {
padding-left:10px;
font-size:14px;
overflow:auto;
height:300px;
}

#space {
padding-top:20px;
}
#extern {
	width:340px;
	height:80px;
	float:right;
	background-color:#ffffff;
}
#extern a {
font-size:16px;
text-decoration:none;
color:#000000;
}
#extern a:hover {
text-decoration:none;
color:#ffffff;
background-color:#000000;
}
#link {
padding:10px;
width:350px;
}

[SpOrTsDuDe-Reese]

Have you tried giving the actual <h2> a float:right;?

Also try giving position:relative to the div and see how that affects it in FF2.

[bluewalrus]

position relative is the same result. postion right on the h2 puts the red block over the text which doesnt make sense to me since it is declared under the h2 still...

[SpOrTsDuDe-Reese]

postion right on the h2

What?

[bluewalrus]

opps i meant float right on the h2 put the red block above the text.

[SpOrTsDuDe-Reese]

Give the red bock a clear:right;.

[bluewalrus]

still no luck with the clear.

[bluewalrus]

still no luck with the clear.

[SpOrTsDuDe-Reese]

Hmm, take out the relative position on the div...take out float:right; on #red.

[bluewalrus]

I guess this is a better postion no to be in firefox and safari are the same but they have a new error. The blocked got moved to the left of the h2 and the top of it. i wanted it under and to the right. i tried pulling it out of the div with the h2 and putting it on its and floating it right but that still didnt work i tried adding 3 line breaks cause i thought it might be because its inline with the h2 but that didnt move it at all. That only moved the blog to its left which also got moved.

Here is the new relevant html and css:

<div id="over">
<h2>the last write</h2>
</div><br /><br /><br />
<div id="red"></div>
<div id="blog3">
<h3>BLOGGY BLOGSALOT</h3><br /><div style="padding-left:25px;">of alll the time i can recall this is where it has to go, know what I mean?</div>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;Check Back here for a bunch of blog type stuff real soon like.</p>
</div>

#over {
float:right;
}
#red {
float:right;
background-color:#FF0000;
height:20px;
width:75px;
}
#blog3 {
font-size:14px;
padding-left:20px;
padding-top:205px;
}
#blog3 h3 {
font-size:20px;
display:inline;
}	
#blog3 p {
padding-left:10px;
font-size:14px;
overflow:auto;
height:350px;
}