Простая 2 колонка

Question

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

Я бы использовал отрицательные поля, но мне не нравится идея сделать строку меню фиксированной высотой. 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

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

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 2

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

Супер простая двухколонная компоновка

Демо

Или см .:

Простой макет CSS с двумя столбцами

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

Answer 3

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

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

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

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

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

Answer 4

.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 width .wrapper.

Answer 5

Лучше поздно, чем никогда. Думаю, это может помочь:

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

Answer 6

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

<!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>