Разделите область "содержание" на две колонки?

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

Я могу сделать:

  • заголовок
  • левая навигационная система
  • Содержание
  • сноска

Так вот так:

________________________ 
|      Header           |
|_______________________|
| Left |     Content    |
| Nav  |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|______|________________|
|     Footer            |
|_______________________|

Однако на некоторых страницах я хочу разделить область содержимого на что-то вроде следующего:

________________________ 
|      Header           |
|_______________________|
| Left | info | info    |
| Nav  |      |         |
|      |      |         |
|      |      |         |
|      |      |         |
|      |______|_________|
|      | Other info     |
|      |                |
|      |                |
|      |                |
|      |                |
|______|________________|
|     Footer            |
|_______________________|

Кто-нибудь знает, как это будет сделано? Или даже хороший сайт, который помогает в этом?

Ответы

Ответ 1

предварительный просмотр макета (онлайн-демонстрация):

enter image description here

HTML: 
<div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">Content</div>
</div>
<div id="footer">Footer</div>
CSS 
/* sizes */
#main-wrap > div { min-height: 450px; }


#header,
#footer {
    min-height: 40px;
}

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

Предварительный просмотр второго макета (онлайн-демонстрация):

enter image description here

html похож на первый макет, но мы включаем одну оболочку в #content-wrap: 
<div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">
        <div id="info-wrap">
            <div class="info">small info </div>
            <div class="info">small info</div>
        </div>
        Content
    </div>
</div>
<div id="footer">Footer</div>
css также аналогичен, кстати, мы добавили некоторые правила css для таргетинга новых div: 
/* sizes */
#main-wrap > div { min-height: 450px; }

#header,
#footer {
    min-height: 40px;
}

.info { min-height: 80px; }

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

#info-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

.info {
    width: 50%;
    float: left;
}

обновление: улучшенные стили

Ответ 4

Для вашего содержимого div установите, что ширина затем создаст три div для информационных разделов.

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

под разделителями добавить:

<div class="clear"></div>

Для этого используется css:

.clear {clear:both;}

Под ясным будет ваш третий div, который даст вам тот макет, который вы хотите.

Ответ 5

Добавьте еще одну внутреннюю таблицу в столбец содержимого. Сделайте эту таблицу как сервер (runat = "server). Укажите условие в коде за файлом и сделайте таблицу видимой как false или true. Здесь мой пример содержит вложенную таблицу. И я скрываю ее, когда у меня было определенное условие с помощью кода файл для определенных событий.

, например:

<body>
    <form id="form1" runat="server">
    <div>

        <table >
            <tr>
                <td colspan="2">
                    header</td>
            </tr>
            <tr>
                <td style="height:50px;">
                    left nav
                </td>
                <td>
                    content

                    <table class="style1" id="innertab" runat="server">
                        <tr>
                            <td>
                                info</td>
                            <td>
                                info</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                other info</td>
                        </tr>
                    </table>

                </td>
            </tr>
            <tr>
                <td colspan="2">
                    footer</td>
            </tr>
        </table>

    </div>
    </form>
</body>

Код за файлом:

protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["value"].ToString == ValueType)
            {
                innertab.Visible = false;
            }
        }