Макет с двумя столбцами, навигационный блок справа, решение из предыдущего потока, похоже, не работает

Question

Я попробовал решение из этой темы , но я должен что-то упустить, потому что оно не работает:

<div style="float:left;margin-right:200px">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div style="float:right;width:200px">
<p>navigation</p>
</div>

Работает, когда текст в div содержимого (левый) короткий, но когда он длинный, div занимает всю ширину браузера, и поле есть, но правый div помещается ниже первого один тем не менее.

Что мне не хватает?

Редактировать: цель состоит в том, чтобы в правой части окна браузера располагался столбец навигации фиксированного размера, а левый элемент div должен занимать все пространство, оставленное правым столбцом навигации (разметка жидкости).

Answer 1

Что бы вы ни хотели, чтобы float: right;, вам нужно разместить над div, который должен быть слева. Теперь у вас есть width:200px для навигации справа и динамически изменяющийся контент справа.

<div style="float:right; width:200px">
<p>navigation</p>
</div>

<div style="margin-right: 200px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 2

Попробуйте это:

<div style="width: 1000px; position: relative;">
  <div style="position: relative; margin-right: 210px;">
     Left column
  </div>
  <div style="width: 200px; margin: 0px; position: absolute; right: 0px; top: 0px;">  
    Right column 
  </div>
</div>

Answer 3

Это работает?

<div id="nav">
<p>navigation</p>
</div>

<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

#nav {
    width:200px;
    float:right;
}
#main {
    float:right;
}

Answer 4

Эй ... плавающие влево. Я не знаю, точно ли я понимаю суть того, что вы пытаетесь сделать, но из того, как вы объясняете проблему, я думаю, что плавающие влево оба помогут вам достичь вашей цели. Дайте мне знать ...

РЕДАКТИРОВАТЬ: Кроме того, вам нужно определить ширину для обоих DIV-контейнеров, если вы хотите, чтобы макет с двумя столбцами был повторно представлен. Таким образом, в сумме ... с плавающей запятой LEFT и определите ширину для каждого, который останется внутри родительского контейнера или области просмотра (с учетом полей и отступов, если используется)

* 1005 Роб *