2 расположения столбцов (фиксированная ширина левого столбца, правая жидкость + прозрачная: обе)

Просто нужна помощь, так как я уже давно разбираюсь в этом. Что мне нужно:

У меня есть раскладка в 2 столбцах, где левый столбец имеет фиксированную ширину 220 пикселей, а правый столбец имеет ширину жидкости.

Код:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>Fluid</title>
    <style type="text/css" media="screen">
        html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; width: auto }
        .sidebar   { width: 200px; float: left; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main">This is the main, and fluid div</div>
    </div>
</body>
</html>

Нет никаких проблем. Когда я использую синтаксис css clear: both в правом столбце, все содержимое после этого перемещается под левым столбцом. Это правильное поведение и ничего против этого.

Но я действительно должен использовать четкость: как в том, так и в том смысле, что он остается только в контексте правильного столбца (вообще не затрагивается левым столбцом и не перемещается под ним)

Есть ли какой-нибудь простой подход с сохранением концепции базового поплавка дизайна страницы?

ОБНОВЛЕНИЕ. Пожалуйста, ознакомьтесь с этой ссылкой, чтобы узнать, о чем я говорю, поскольку это может быть немного сбито с толку из моего описания. Ссылка: http://jsfiddle.net/k4L5K/1/

Ответы

Ответ 1

Здесь ваш измененный CSS:

html, body {
    background: #ccc;
}

.wrap {
    margin: 20px;
    padding: 20px;
    padding-right:240px;
    background: #fff;
    overflow:hidden;
}

.main {
    margin: 0 -220px 0 auto;
    width: 100%;
    float:right;
}

.sidebar {
    width: 200px;
    float: left;
    height: 200px;
}

.main, .sidebar {
    background: #eee; min-height: 100px;
}

.clear { clear:both; }
span { background: yellow }

В основном то, что я сделал, это изменение способа вашего макета, так что .main div плавает справа. Для этого нам пришлось добавить 2 вещи:

  • Заполнение 240px на div .wrap и
  • Правое поле на .main div -220px, чтобы правильно выровнять текучую часть страницы.

Поскольку мы поместили div .main справа, clear: both; теперь влияет только на контент внутри div .main, как вы хотите.

Здесь вы можете увидеть демонстрацию: http://jsfiddle.net/6d2qF/1/

Ответ 2

Вопрос довольно старый, но вот другое решение, которое я нашел недавно.

Нам просто нужно сделать 2 вещи:

  • Добавьте overflow: auto; в .main div
  • Убедитесь, что оболочка сохраняет поток документа, добавив overflow: hidden; в div .wrap или добавив .clear div в качестве последнего дочернего элемента .wrap

Вот обновленная скрипта: http://jsfiddle.net/k4L5K/89/

Ответ 3

Попробуйте следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>Fluid</title>
    <style type="text/css" media="screen">
        html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; width: auto }
        .sidebar   { width: 200px; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; float: left; }
        .clear {clear:both;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main">This is the main, and fluid div</div>
        <div class="clear"></div>
    </div>
</body>
</html>