Div над содержимым - движется вниз второй следующий div

Question

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

<div id="container"> 
    <div id="new-div">new div</div> 
    <div id="content">content</div> 
    <div id="sidebar">sidebar</div> 
</div> 

.

#container { 
    background: lightgrey; 
    width: 500px 
} 
#new-div { 
    background: darkred; 
    width: 300px 
} 
#content { 
    background: lightblue; 
    width: 300px; 
    height: 400px; 
    display: inline-block 
    } 
#sidebar { 
    background: darkgreen; 
    width: 100px; 
    height: 400px; 
    float: right; 
} 

http://jsfiddle.net/zd9omqa7/2/

Как я могу избежать боковой панели DIV съехать? Я бы хотел, чтобы он всегда плавал в правом верхнем углу.

Answer 1

Два простых способов, которые приходят на ум, будет либо изменить порядок HTML, чтобы ваш сайдбар приходит первым в DOM:

http://jsfiddle.net/ctaylr/xxhdn1xb/1/

<div id="container"> 
    <div id="sidebar">sidebar</div> 
    <div id="new-div">new div</div> 
    <div id="content">content</div> 

</div> 

или использовать позицию абсолютной для грубой силы двигаться до вершины:

http://jsfiddle.net/ctaylr/warnjgp3/2/

(не забудьте поместить контейнер DIV относительно для этого работы)

В противном случае вы можете посмотреть, чтобы ваша левая сторона «разделилась» в контейнере.

Надеюсь, это поможет!