Просто нужна помощь, так как я уже давно разбираюсь в этом. Что мне нужно:
У меня есть раскладка в 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/