Question

I know this has been asked a million times before, but I can’t seem to crack it and I’m sure someone more experienced could spot my mistake much more quickly than I could work it out.

HTML: http://sas98.user.srcf.net/guestbuzz/index.php

CSS: http://sas98.user.srcf.net/guestbuzz/style.css

I’d like the right hand box to sit on the right hand side of the form but within the container so its right hand side is aligned with the right hand side of the nav bar.

Thanks very much in advance.

Answer 1

Understand the block model of a div. It will take the entire width available. this works:

.container {
    width: 1000px;
    margin: 0px auto;
    /*display:table;*/
    position:relative;
}

    #left {
        width: 600px;
        display:inline-block;
        /*float:left;*/
        position:absolute;
        left:0;
    }

    #right {
    background-color:rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
           -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
             -o-box-shadow: 0 0 10px rgba(0,0,0,0.1);
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
        width: 400px;
        border-radius: 3px;
        display:inline-block;
        /*float:right;*/
        position:absolute;
        right:0;
    }

Note that the commented lines are another way that would work.

What did I do?.

1. make container relative, so absolute positioned childs of this div, would position relative to this one.
2. make display:inline-block; the left and the right blocks, so it takes the necessary width and dont clear nor overlap each other. This is not necessary if you set a width.
3. make right position to 0 to the right and left position 0 to the left.

UPDATE

I now think that the best approach is to trigger a block formatting context. Make #left float to the left and to #right, give it the propperty overflow:auto; or any other different than visible. In IE6 you need to trigger something called hasLayout so give to #right the propperty zoom:1;.