Div next to div. Should work but doesnt...

Question

Hello!

I have this classic problem that seems impossible to solve for me. I just want two divs to float next to each other horizontally instead of vertically. I have read several solutions to this common problem but they doesnt seem to work for me.

#wrapper
{
margin-top: 260px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
width: 700px;
height: 400px;
padding:0;
}

#content
{
background-color: blue;
width: 500px;
border: 1px solid #9abdf8;
margin-right: 200px;
margin:0;
float:left;
}

#right
{
float:right;
margin-left: 500px;
width: 200px;
background-color: red;
}


<div id="wrapper">


    <div id="navigation">
    navbar here     
    </div>

    <div id="content">
        wda wda  
    </div>

    <div id="right">
            right right right right right 
        </div>


</div>

The result is this: http://www.roonookie.com/r.jpg

If i try this solution (http://stackoverflow.com/questions/3061339/how-to-place-two-divs-to-the-next-one) i get the same result as my picture. But if I remove the wrapper class, then that solution works. But I want to keep the wrapper class...

I´ve also tried display:inline and that doesnt work either.

What am I doing wrong? :(

Answer 1

#content has a border of 1px on either side, so it needs a width of 498px so that it's overall width is 500px. The border width is in addition to the width you specify for an element, rather than included in it - look into the box model.

Answer 2

In addition To 46Bit comment. If you are to use padding rule on the #content div later. your calculations must be right:

E.g if padding-right: 4px;
width = 498 - 4
if padding:4px
width = 498-8