Div рядом с Div. Должен работать, но не

Question

У меня есть эта классическая проблема, которую, кажется, невозможно решить для меня.Я просто хочу, чтобы два деления плавали рядом друг с другом по горизонтали, а не по вертикали.Я прочитал несколько решений этой общей проблемы, но они, похоже, не работают для меня.

#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>

Результат такой: http://www.roonookie.com/r.jpg

Если я попробую это решение ( Как поместить два деления в следующий * ), я получу тот же результаткак моя картина.Но если я удаляю класс-обертку, то это решение работает.Но я хочу сохранить класс оболочки ...

Я также попробовал display: inline, и это тоже не работает.

Что я делаю не так?(

Answer 1

#content имеет границу 1 пиксель с каждой стороны, поэтому ему нужна ширина 498 пикселей, чтобы его общая ширина составляла 500 пикселей.Ширина границы является дополнением к ширине, которую вы указываете для элемента, а не включена в него - посмотрите на блочную модель.

Answer 2

В дополнение к 46-битному комментарию. Если вы позже будете использовать правило заполнения в #content div. ваши расчеты должны быть правильными:

Например, если отступ справа - 4 пикселя;
ширина = 498 - 4
если отступ: 4px
ширина = 498-8