VPF::Двухколоночная верстка - Форум программистов

Leoo

Дата 26.2.2009, 16:25 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 270
Регистрация: 3.10.2005
Где: г. Обнинск

Репутация: 1
Всего: 3

Есть такая проблема. Сделал резиновую двухколоночную верстку и внутри правой колонки использую свойство clear:both; и из-за него все последующие элементы падают вниз блока, а надо чтоб шли попорядку

Код


<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    #wrapper {
    padding-left:200px;
    }
    #sidebar {
        float:left;
        width:200px;
        position:relative;
        left:-200px;
        margin-right:-100%;
        background:#f0faff;
        }
        #sidebar ul {
        margin-top:1em;
        }
    #content {
        background:#fff1e3;
        width:100%;
        }
    * html #content{
        zoom:1;
        position:relative;
        margin-right:-3px;
        left:-3px;
        }
    .cl {
        overflow:hidden;
        clear:both;
        height:1px;
        font-size:1px;
        line-height:0;
    }
</style>
</head>

<body>
    <div id="wrapper">
            <div id="sidebar">
                <ul>
                    <li>Пункт 1</li>
                    <li>Пункт 2</li>
                    <li>Пункт 3</li>
                    <li>Пункт 4</li>
                    <li>Пункт 5</li>
                    <li>Пункт 6</li>
                </ul>
            </div>
            <div id="content">
                <div>
                    <div style="float: left; padding: 5px;">Левый верхний</div>
                    <div style="float: left; padding: 5px;">Правый верхний</div>
                </div>
                <div class="cl"></div>
                <div style="padding: 5px;">Нижний</div>
            </div>
    </div>
</div>
</body>
</html>

Помогите пожалуйста!

--------------------

Если вы не страдаете паранойей, это не значит, что они за вами не летят!

Рыжий

Дата 26.2.2009, 16:40 (ссылка)

(нет голосов)

Загрузка ...

Помешанный

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: 1
Всего: 20

Цитата(Leoo @ 26.2.2009, 15:25

)

внутри правой колонки использую свойство clear:both; и из-за него все последующие элементы падают вниз блока, а надо чтоб шли попорядку

Если не использовать clear:both - все последующие элементы идут по порядку, что вас не устраивает в этом варианте?

Leoo

Дата 26.2.2009, 16:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 270
Регистрация: 3.10.2005
Где: г. Обнинск

Репутация: 1
Всего: 3

мне нужно использовать это свойство
а про то что если его не использовать, то все нормально я знаю )))

--------------------

Если вы не страдаете паранойей, это не значит, что они за вами не летят!

ksnk

Дата 26.2.2009, 17:42 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Статейка как-то прилетела...

Там 3 рецепта-заменителя clear:both...

Код


<div style="float:left;width:100%;">
                    <div style="float: left; padding: 5px;">Левый верхний</div>
                    <div style="float: right; padding: 5px;">Правый верхний</div>
                </div>

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

fromXiper

Дата 27.2.2009, 09:32 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 12.2.2009

Репутация: нет
Всего: нет

Проблему можно решить, обернув div'ы в дополнительный контейнер:

Код


<div id="content">
       <div class="container">
            <div>
                    <div style="float: left; padding: 5px;">Левый верхний</div>
                    <div style="float: left; padding: 5px;">Правый верхний</div>
            </div>
            <div class="cl"></div>
       </div>
       <div style="padding: 5px;">Нижний</div>
</div>

При этом нужно добавить в стили:

Код


.container {
display: table; /* эмулируем таблицу (второй вариант это использование float, но тогда немного больше проблем с IE) */
width: 100%; /* это нужно для IE */
}
* html .container {
margin-left: -3px; /* исправляем небольшой косяк в IE6 */
}

Тема раскрыта в статье Фиксированная колонка + резиновая + clear:both

Это сообщение отредактировал(а) fromXiper - 20.3.2009, 12:39

Leoo

Дата 27.2.2009, 10:29 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 270
Регистрация: 3.10.2005
Где: г. Обнинск

Репутация: 1
Всего: 3

Всем спасибо, очень помогло)

--------------------

Если вы не страдаете паранойей, это не значит, что они за вами не летят!

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »