Как заставить мой правый ящик всплывать правильно ...?

Question

Я пытаюсь заставить эту центрированную оболочку плавно работать с окном просмотра, но у меня проблемы с размещением правого делителя. Вот как выглядит HTML:

<div id="wrapper">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>

А вот CSS-код:

#wrapper{
 top: 0px;
 width:80%;
 margin: 0 auto;}

#left {
 top: 0px;
 margin: 0px;
 padding: 10px;
 background: #555;
 width:10%;
 height:400px;
 float:left;}

#middle { 
 padding: 10px;
 background: #666;
 height:400px;
 width:75%;
 clear:none;}

#right {
 top: 0px;
 margin: 0px;
 padding: 10px;
 background: #777;
 width:10%;
 height:400px;
 float:right;}

Что происходит, так это то, что правый блок размещается под средним блоком, а не справа. Кажется, не могу найти логику в этом! ... Я пробовал с позицией: относительная, пронумерованная ширина, правая часть внутри середины и т. Д. Но ничто не заставляет его встать на место. Что делать ? Thx / Nic

Answer 1

Вы должны переместить #middle div влево и применить некоторое поле к #left, если необходимо Это должно решить проблему:).

Answer 2

Вы можете поменять местами порядок элементов html. Имейте правый div перед левым div.

Есть несколько других способов сделать макет из 3 столбцов, используя положение: например, абсолютный Поищите в Google "3 колонки", и вы найдете несколько хороших примеров.