Simple 2 column layout

Question

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

Я бы использовал отрицательные поля, но мне не нравится идея сделать панель меню фиксированной высотой. Float и Clear не помогают вообще ...

.wrapper { margin-left: 100px; width: 1000px; border-left: 1px solid #bcbcc6; border-right: 1px solid #bcbcc6; border-bottom: 1px solid #bcbcc6; } 

.wrapper .sidebar { float: left; clear: left; display: block; padding: 5px; width: 190px; border-right: 1px solid #b6bcc6; } 
.wrapper .content { float: left; clear: right; display: inline; position: relative; padding: 5px; margin-left: 200px; width: 790px; } 

<div class="wrapper"> 
    <div class="sidebar"> 
     <ul> 
      <li><a href="">Menu Item 1</a></li> 
      <li><a href="">Menu Item 2</a></li> 
      <li><a href="">Menu Item 3</a></li> 
     </ul> 
    </div> 

    <div class="content"> 
     <!-- this is crucial... the content div surrounds an asp.net ContentPlaceHolder control --> 
     <asp:ContentPlaceHolder...></asp:ContentPlaceHolder> 
    </div> 

Может кто-нибудь сказать мне, что я делаю неправильно?

ОБНОВЛЕНИЕ. Чтобы точно увидеть, что происходит, я изменил цвет .content и посмотрел, где именно. Кажется, что сам фактический блок находится в правильном положении, но содержимое этого блока (фактическое содержимое страницы) находится в нижней части блока .sidebar ...

Answer 1

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

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

.wrapper .sidebar { float: left; clear: left; display: block; width: 190px; border-right: 1px solid #b6bcc6; } 
.wrapper .content { margin-left: 200px; width: 790px; } 

Кроме того, как azram19 подмечено, общая ширина меню и содержание превышает 1000px. Я удалил прописку, чтобы исправить это.Между вашим меню (191px wide) и вашим контентом (200px left margin) будет по-прежнему 9px.

Если вам нужно заполнить (например, если у div есть цвета фона или изображения), убедитесь, что вы уменьшаете ширину обоих div на 10px.

Answer 2

Это может быть из-за отсутствия min-height недвижимость, Howerver, посмотреть на:

Super Simple Two Column Layout

The Demo

Или смотрите:

Simple 2 column CSS layout

Чтобы получить представление о том, и как сделать это кросс-браузер :)

Answer 3

.wrapper { margin-left: 100px; width: 1000px; border-left: 1px solid #bcbcc6; border-right: 1px solid #bcbcc6; border-bottom: 1px solid #bcbcc6; } 

.wrapper .sidebar { float: left; clear: left; display: block; padding: 5px; width: 190px; border-right: 1px solid #b6bcc6;} 
.wrapper .content { float: left; clear: right; display: inline; position: relative; padding: 5px; width: 789px;} 

Этот код будет работать. Имея margin-left:200px в .content, вы сделали его ширину - 200 + 790 + 10 = 1000px. И после удаления этого мне пришлось уменьшить ширину одного из столбцов, потому что ширина левого столбца была 190+10+1(border), и они не могли поместиться в 1000px шириной .wrapper.

Answer 4

Большая часть кода является избыточной. Если вырезать ненужные части, вы получите рабочий старт:

CSS:

#wrapper { margin-left: 100px; width: 1000px; border: 1px solid #bcbcc6; border-top:none; } 
#sidebar { float: left; padding: 5px; width: 190px; border-right: 1px solid #b6bcc6; } 
#content { padding: 5px; margin-left: 200px; width: 790px; } 

HTML:

<div id="wrapper"> 
    <div id="sidebar"> 
    </div> 
    <div id="content"> 
    </div> 
    <br style="clear:both"> 
</div> 

Обратите внимание, что я повернул все wrapper, sidebar, и content в идентификаторы, поскольку они уникальны для любой страницы. Классы используются для повторного использования несколько раз на странице.

Answer 5

Нет необходимости в четких левых и правах или левом поле на контенте. Также будьте осторожны, добавляя добавку и границу, добавляющую к общему размеру поля. Таким образом, ваша 1000-широкоформатная обертка имела в ней ящики шириной более 1000 пикселей, отбрасывая содержимое окна. Боковая панель: 190px (ширина) + (5px padding (с обеих сторон)) 10px + 1px (border) = всего 201px. Я удалил очистители и уменьшил колонку содержимого до 789px, чтобы компенсировать границу 1px на боковой панели.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; 
charset=iso-8859-1"> 
    <title>Untitled</title> 
</head> 
<body> 

<style type="text/css"> 
.wrapper { 
margin-left: 100px; 
width: 1000px; 
border-left: 1px solid #bcbcc6; 
border-right: 1px solid #bcbcc6; 
border-bottom: 1px solid #bcbcc6; 
} 
.wrapper .sidebar { 
float: left; 
display: block; 
padding: 5px; 
width: 190px; 
border-right: 1px solid #b6bcc6; 
} 
.wrapper .content { 
float: left; 
position: relative; 
padding: 5px; 
width: 789px; 
} 
</style> 

<div class="wrapper"> 
    <div class="sidebar"> 
     <ul> 
      <li><a href="">Menu Item 1</a></li> 
      <li><a href="">Menu Item 2</a></li> 
      <li><a href="">Menu Item 3</a></li> 
     </ul> 
    </div> 

    <div class="content"> 
     content 
     <!-- this is crucial... the content div surrounds an asp.net ContentPlaceHolder control --> 
     <asp:ContentPlaceHolder...></asp:ContentPlaceHolder> 
    </div> 

</body> 
</html> 

Answer 6

Лучше поздно, чем никогда. Мысль это может помочь:

В HTMLs

<div id="content"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 

CSSS

#content { background-color: #F1EBD9; } 
#left { float: left; width: 14em; } 
#right { margin-left: 14em; background-color: #FFF; } 

Вы можете просмотреть это @http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout