Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Двухколоночная верстка


Автор: Leoo 26.2.2009, 16:25
Есть такая проблема. Сделал резиновую двухколоночную верстку и внутри правой колонки использую свойство 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
Цитата(Leoo @  26.2.2009,  15:25 Найти цитируемый пост)
внутри правой колонки использую свойство clear:both; и из-за него все последующие элементы падают вниз блока, а надо чтоб шли попорядку

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

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

Автор: ksnk 26.2.2009, 17:42
http://rmcreative.ru/blog/post/razlichnye-sposoby-primenenija-css-svoystva-clear-k-float-blokam-bez-ispolzovanija-dopolnitelnoy-razmetki как-то прилетела...

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

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

Автор: fromXiper 27.2.2009, 09:32
Проблему можно решить, обернув 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 */
}



Тема раскрыта в статье http://www.xiper.net/html-and-css-tricks/karkas-verstki/fix-colonka-rezinovaya-clear-both.html

Автор: Leoo 27.2.2009, 10:29
Всем спасибо, очень помогло)

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)