Меню
Что нового?

Проблемы с версткой. (Что-то я совсем торможу)

igortik

igortik

Новичок
Есть html:

PHP: 
<!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" lang="ru">
<head>
<title></title>
</head>
<body>
    	<div id="left_column">Левая колонка</div>
        <div id="right_column">Правая колонка</div>
    	<div id="middle_column">
        	<div style="float:left">{Следующий за этим блоком контент должен обтекать справа}</div>
            <div style="clear:left">Но контент не будет обтекать</div>
        </div>
</body>
</html>
Есть CSS:

PHP: 
#left_column {
	float:left;
	width:250px; 
	background-color:#CCFF66;
}

#right_column {
	float:right;
	width:250px; 
	background-color:#CCFF66
}

#middle_column {
	margin:0 300px 0 300px;
	background-color:#FFCC99
}
На первый взгляд все элементарно, но:

как только левая колонка становится больше средней по высоте (по мере наполнения контентом), то clear:left в средней колонке вылазит боком, а именно: увеличивает размер #middle_column на величину #left_column
 

tz-lom

Продвинутый новичок
не ставь clear:left , он тебе не нужен
в таком поведении нет ничего удивительного,так и должно работать
 
igortik

igortik

Новичок
tz-lom написал(а):
не ставь clear:left , он тебе не нужен
в таком поведении нет ничего удивительного,так и должно работать
Нажмите для раскрытия...
Спасибо за совет, но как быть, если мне необходимо прервать обтекание в такой конструкции?
Сейчас сложно сообразить зачем, но, даже исходя из того, что любой clear в данном блоке вызовет такие последствия ....

Кстати, заплатка есть (кроссбраузерная):

PHP: 
#middle_column {
	height:1%; /* ie6 hasLayout */
	overflow-y:hidden;
	background-color:#FFCC99
}
 
igortik

igortik

Новичок
Вообще, мне не ясно почему так происходит в конкретном случае.
Ведь clear нужен, чтобы отменить обтекание элемента.

Если элемент находится внутри контейнера, и за этим элементом идет блок с clear, то каким боком это имеет отношение к величине соседа родительского контейнера ... абалдеть ...
 
igortik

igortik

Новичок
Кстати, я не согласен, что clear мне не нужен.

Вот пример на листинге новостей:

PHP: 
<div class="box">
 <div class="img">{картинка 100x100px}</div>
 <div class="content">{какой-то контент}</div>
</div>
при этом .img{float:left}

И, чтобы браузер просчитал высоту .box - необходимо сделать так:

PHP: 
<div class="box">
 <div class="img">{картинка 100x100px}</div>
 <div class="content">{какой-то контент}</div>
 <div style="clear:left"></div>
</div>
тогда .box будет занимать не только пространство, которое требуется .content, но и охватит высоту .img

Это утверждение проверяется, если .img по высоте больше, чем .content
 
igortik

igortik

Новичок
В общем, вот кросбраузерное решение с хаком только для ie6 (хак безобидный и не подразумевает шаманских методов):

PHP: 
<!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" lang="ru">
<head>
<title></title>
</head>
<body>
        <div id="left_column">Левая колонка</div>
        <div id="right_column">Правая колонка</div>
        <div id="middle_column">
          <div class="content">
            <div style="float:left">{Следующий за этим блоком контент должен обтекать справа}</div>
            <div style="clear:left">Но контент не будет обтекать</div>
          </div>
        </div>
</body>
</html>
PHP: 
#left_column {
    float:left;
    width:250px; 
    background-color:#CCFF66;
}

#right_column {
    float:right;
    width:250px; 
    background-color:#CCFF66
}

#middle_column {
    height:1%; /* ie6 hasLayout */
    margin:0 300px 0 300px;
    background-color:#FFCC99
}
#middle_column .content{overflow:hidden}
Я абсолютно не понимаю, почему первый clear в #middle_column вызывает такую реакцию и растягивает по высоте #middle_column контейнер.
Лечится это явление обычным overflow:hidden, но, в то же время, свойство overflow нежелательно применять к блокам, которые обтекают (http://bulyonov.ru/2009/12/26/opera-and-gecko-bug-float-overflow-and-margin/#codesyntax_1), потому я засунул контент в #middle_column .content и поставил дочернему блоку overflow:hidden

Проверено в: ie6-8, ff 3.6, opera 10.61, chrome 5
 

tz-lom

Продвинутый новичок
потому что у тебя поток начинается с left_column , и clear просчитывается относительно всего потока
 
igortik

igortik

Новичок
tz-lom написал(а):
потому что у тебя поток начинается с left_column , и clear просчитывается относительно всего потока
Нажмите для раскрытия...
Ок, допустим.

Но, опять же, как быть в случае, который я описал.
Ведь clear нужен. Он где только не применяется, чтобы браузер корректно считал высоту контейнера, в котором есть флоатнутые элементы.
 

tz-lom

Продвинутый новичок
разбить поток
или встроить флоат внутрь блока,если можно
или встроить в блок отбойник и флоат выдернуть из контекста,опять таки если можно
 
igortik

igortik

Новичок
tz-lom написал(а):
1. разбить поток
2. или встроить флоат внутрь блока,если можно
3. или встроить в блок отбойник и флоат выдернуть из контекста,опять таки если можно
Нажмите для раскрытия...
1. "Разбить поток" - к сожалению, не понял как
2. "или встроить флоат внутрь блока,если можно" - в полной версии макета мои колонки (left_,right_,middle_[column]) лежат внутри контейнера (ВСЕ).
2.1. Тот пример, что я писал выше с .box - там та же ситуация, флоатнутые контейнеры лежат внутри .box, а он сам (.box) в #middle_column (http://phpclub.ru/talk/threads/Проблемы-с-версткой-Что-то-я-совсем-торможу.66302/#post-589511)
3. "или встроить в блок отбойник" - также не понял, увы.
 
c0dex

c0dex

web.dev 2002-...
Команда форума
Партнер клуба
А ведь там написано про hasLayout )))) Прямо в заплатке, в камменте. Эх...
 
Войдите или зарегистрируйтесь для ответа.
Сверху