Question

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 (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.