Positioning problems IE and FF

[mniki]

I've worked on a change of lay-out of my website all evening and it's starting to get blurry for me right now.
My problem is that the positioning of two divs (#Navleft and #Content) is perfect in Internet Explorer but in Firefox it is all wrecked...

I've looked and looked but I can't solve my problem. I'm sure it is very easy to detect, but I need someone with a clear and new eye to look at the stylesheet, please...

Goal: I want the Navleft and the Content to be under the menubar (javascript) and I want the Navleft (of course) to be positioned left within the container (which is centered) and the Content to be on the right of the Navleft. In IE it is clear how my goal looks like. In FF the Content is at the same spot as the Navleft.

This is the part of the stylesheet considering the two divs:

#Header
{
align:left;
margin:0;
padding: 0;
border:0;
}

#Navup
{
margin-top:0px;
}

#Navleft
{
float:left;
width:240px;
margin:10px 0 0 0px;
padding: 10px;
padding-left:0px;
background-color: transparent;
border: 0;
}

#Content
{
align:right;
border:1px solid #339900;
background-color:#FFFFFF;
width: 525px;
margin:20px 0 0 270px
padding-left:0px;
padding: 10px;
}

[mniki]

I can't seem to edit my message, but the I forgot (the most important :S ) link to the website:

..

[edited by: SuzyUK at 6:42 am (utc) on Mar. 26, 2007]
[edit reason] Please no URI's per TOS #13 [WebmasterWorld.com] [/edit]

[Setek]

Welcome to Webmaster World :)

Please remember you're not allowed to drop URIs like that - see the Webmaster World Terms of Service [webmasterworld.com] and the CSS Forum Charter [webmasterworld.com].

About your problem:

#Content
{
[5]align:right;[/5]
border:1px solid #339900;
background-color:#FFFFFF;
width: 525px;
[5]margin:20px 0 0 270px[/5]
padding-left:0px;
padding: 10px;
}

(my big)

Just so you know,

align: right;

isn't a valid CSS property. The appropriate method in CSS would be to use automatic margins, however unnecessary given your purpose of simply pushing it away from the floated left column.

Which brings me to the second big - you haven't ended the property value with a semi-colon (;) which is why standards-compliant browsers aren't adhering to the 270px of left margin. Add it in and you'll be one step closer to the layout you desire :)

[edit]P.S.: To help you in future, you should validate your (X)HTML and CSS to find parse errors such as these - validation makes debugging a lot easier and less hair-tear-out-y :)

[/edit][edited by: Setek at 3:56 am (utc) on Mar. 26, 2007]