CSS / HTML-无法将DIV放置在右侧

Question

On our website, we have a container, with a DIV box inside which leaves a space along the right hand side so we can add some more boxes with images / text.

I got as close as the boxes to the right hand side but underneath the "main" div.

http://jsfiddle.net/Ug5pz/2/

Thanks!

CSS:

#container {
    position: relative;
    width: 600px;
    height: 400px;
    margin: 0 auto 0;
    background: #FFF;
    border-style:solid;
    border-width:2px;
}
#main {
    position:relative;
    width: 450px;
    height: 300px;
    border-style:solid;
    border-width:2px;
}
#sidebox {
    position:relative;
    width:120px;
    height:50px;
    float:right;
    border-style:solid;
    border-width:2px;
}

HTML:

<div id="container">
    <div id="main">Welcome to our website!</div>
    <div id="sidebox">Sidebox</div>
</div>

Answer 1

Try adding float:Left to the #main CSS

Alternatively you could modify the #sidebox CSS as follows:

position:absolute;
right:0px;
top:0px;