HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

»

Альтернативное решение отдельного слоя с clear:both

Как же можно по другому отменять обтекание плавающих элементов, не используя отдельный слой с clear:both?

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!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>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Альтернатива clear:both</title>
     <style type="text/css">
        .left{
        width:20%;
        float:left;
        background:#9C0;
        }
        .right{
        width:40%;
        float:right;
        background:#F33;
        }
        .clear{
        clear:both;  
        }
        #main{
        background:#0CF;    
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="left">
            Привет, я левая колонка с шириной 20%<br />
            Это так здорово!<br />
            Не правда ли?
        </div>
        <div class="right">
            Привет, а я правая колонка<br />
            И ширина у меня больше, чем у этой выскочки<br />
            Аж целых 40%<br />
            Я круче всех!<br />
            Пользуясь случаем,<br />
            Хочу сказать<br />
            Автор этой статьи верстать ни фига не умеет<br />
            Возомнил тут из себя мастера
        </div>
        <div class="clear"></div>
    </div>
</body>
</html>

Это способ работает, но есть ещё более короткий, внимательней смотрите css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Альтернатива clear:both</title>
    <style type="text/css">
		.left{
		width:20%;
		float:left;
		background:#9C0;
		}
		.right{
		width:40%;
		float:right;
		background:#F33;
		}
		#main{
		background:#0CF;    
		overflow:hidden;
		zoom:1; /* Ублажаем ИЕ6 :) */
		}
    </style>
</head>
<body>
    <div id="main">
        <div class="left">
            Привет, я левая колонка с шириной 20%<br />
            Это так здорово!<br />
            Не правда ли?
        </div>
        <div class="right">
            Привет, а я правая колонка<br />
            И ширина у меня больше, чем у этой выскочки<br />
            Аж целых 40%<br />
            Я круче всех!<br />
            Пользуясь случаем,<br />
            Хочу сказать<br />
            Автор этой статьи верстать ни фига не умеет<br />
            Возомнил тут из себя мастера
        </div>
    </div>
</body>
</html>

Т.е., как вы видите из стилей, мы внешнему слою добавлаяем overflow:hidden и zoom:1 (смотри haslayout ie), чтобы наш всеми любимый ИЕ6 понял, что от него требуется :)

Метки: , ,

Запись опубликована 29.06.2009 в 00:06 и размещена в рубрике css. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (4) на “Альтернативное решение отдельного слоя с clear:both”

  • Pavel:
    23.09.2009 в 16:10

    zoom не есть валидно

  • Костя:
    23.09.2009 в 16:55

    Pavel, вы абсолютно правы. Может попробывать height:1%, главное haslayout включить.

  • shass:
    07.12.2009 в 18:15

    Я всегда решаю проблему с IE таким образом:
    #main{
    background:#0CF;
    _height: 1%;
    overflow: hidden;
    }

  • jb-tester:
    15.02.2010 в 11:49

    1 — и zoom и _height не валидно, можно допустим через условные каменты подключать ксс для ие где прописать класс .zoom { zoom:1;} и использовать его где нужно…
    2 — 1й способ отличается от второго только семантикой хтмл кода, по сути кол-во тоже)
    3 — во втором примере невалидное zoom можно заменить на валидные свойства:
    float: left;
    width: 100%;
    но боюсь в если блок использовать внутри других прийдется делать корректировки, а так для примера тоже подойдет.

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос