my blog project uses css for layout and it consists of 3 boxes; header, main content and a navigation box. The header & main boxes are 800px wide and body defines text-align:center so they're center positioned. The login box is only about 50x50px but I want to position it so that it comes just to the right but at the same vertical position as the main box. Using the following setup (using IE7) the MainBox is mysteriously displaced ca. 20pixels to the left??

I'm having a little bit of a hard time understanding what you want exactly.

I see the nav links which is pushed to the far right of the page - this is what happens when you float right. However I am not sure where exactly you want your Nav Links div.

Do you want it inside the Main content div but all the way to the right? Or do you want it directly to the right of the main content div?

As I see it now there are 3 rows. top, nav links, and main. top and main are pretty much the same. nav links is in the middle but pushed to the far right. Do you want nav links to be pushed a few more pixels to the left so that its edge matches the right edges of the other two divs?

I know it's difficult to show what you want by typing but perhaps you can create a quick image of what you want?

 this is what I'm trying to get, while the current css setup pushes the main box a little to the left!

Here you go:

        body {background:#F8FAF0; padding-top:12px; text-align:center; font-family:Tahoma; font-size:12px}
        div.Container {width: 853px;} /* 800 + 50 (nav width) + 2 (content border) + 1 (space for navbox to fit) */
        div.TopBox {width:800px; float: left;}
        div.NavBox {background-color:Red; width:50px; text-align:left; float:right;}
        div.ContentBox {width:800px; background-color:white; text-align:left; border:1px solid gray; float: left}

 
        <div class="Container">
            <div class="TopBox">
                topbanner</div>
            <div class="ContentBox">
                main content bla bla<br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
            <div class="NavBox">
                nav links...
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
        </div>