Как лучше всего разместить div в CSS?

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

Вы должны использовать атрибуты CSS float и clear, чтобы получить желаемый эффект.

Сначала я определил стили для вызываемых left и right для двух столбцов в моем макете и стиль под названием clearer, используемый для сброса потока страницы.

<style type = "text/css">
.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 800px;
}
.clear {
    clear: both;
    height: 1px;
}
</style>

Затем я использую их для макета моей страницы.

<div>
 <div class = "left">
   <ul>
    <li>Categories</li>
    <li>Weapons</li>
    <li>Armor</li>
    <li>Manuals</li>
    <li>Sustenance</li>
    <li>Test</li>
  </ul> 
 </div>
 <div class = "right">
   Blah Blah Blah....
 </div>
</div>
<div class = "clear" />

float действительно подходит для этого. Однако пример, приведенный bmatthews68, можно улучшить. Самая важная вещь о плавающих блоках - это то, что они должен указывают явную ширину. Это может быть довольно неудобно, но так работает CSS. Однако обратите внимание, что px - это единица измерения, которой нет места в мире HTML / CSS, по крайней мере, для указания ширины.

Всегда прибегайте к мерам, которые будут работать с разными размерами шрифта, например, используйте em или %. Теперь, если меню реализовано в виде плавающего тела, это означает, что основное содержимое плавает «вокруг» его. Если основное содержимое выше, чем меню, это может быть не то, что вам нужно:

float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png

<div style = "width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>

Вы можете исправить это поведение, присвоив основному контенту margin-left, равный ширине меню:

float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png

<div style = "width: 10em; float: left;">Left</div>
<div style = "margin-left: 10em;">Right, spanning<br/> multiple lines</div>

В большинстве случаев вы также хотите присвоить основному контенту padding-left, чтобы он не «прилипал» к меню слишком близко.

Кстати, тривиально изменить приведенное выше так, чтобы меню было справа, а не слева: просто замените каждое вхождение слова «слева» на «справа».

Ах, и последнее. Если содержимое меню выше, чем основное содержимое, оно будет отображаться странно, потому что float делает некоторые странные вещи. В этом случае вам нужно будет очистить поле под плавающим телом, как в примере с bmatthews68.

/ Обновлено: Черт, HTML не работает так, как это было показано в предварительном просмотре. Что ж, вместо этого я включил картинки.

Все ответы, говорящие об использовании поплавков (с явной шириной), верны. Но чтобы ответить на исходный вопрос, как лучше всего позиционировать <div>? По-разному.

CSS очень контекстуален, и поток страницы зависит от структуры вашего HTML. Нормальный поток - это то, как элементы и их дочерние элементы будут располагаться сверху вниз (для элементов блока) и слева направо (для встроенных элементов) внутри своего содержащего блока (обычно родительского). Так должна работать большая часть вашего макета. Вы будете склонны полагаться на width, margin и padding, чтобы определить расстояние и расположение элементов по отношению к другим элементам вокруг него (будь то <div>, <ul>, <p> или иначе, HTML в основном является семантическим).

Использование таких стилей, как float, absolute или relative, может помочь вам достичь очень конкретных целей вашего макета, но важно знать, как их использовать. Как было объяснено, float обычно используется для размещения блочных элементов рядом друг с другом, и это действительно хорошо для многоколоночных макетов.

Я не буду вдаваться в подробности здесь, но вы можете проверить следующее:

• Ссылки SitePoint CSS - вероятно, самый простой и полный справочник по CSS, который я нашел в Интернете.
• Модель визуального форматирования W3C CSS2.1 - Да, это трудное чтение, но оно все объясняет.

вы можете использовать поплавок

<div class = "left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>

в файле css

.left-menu{float:left;width:200px;}