Трехколоночный макет на div с одинаковой высотой

			
		Трехколоночный макет на div с одинаковой высотой
		Не секрет, что блоки div по умолчанию растягиваются по ширине на 100%, а по высоте только до размера содержимого. Я искал решение этой проблемы, находил различные варианты, но только один из них смог достаточно хорошо справиться с этой задачей.

 А задача заключалась в следующем:
Адекватная работа во всех браузерах.
Без использования хаков css (хотя без этого не обошлось).
Без использования javascript.
Желательно понятный и небольшой код решения (чтобы потом не запутаться что и куда нужно лепить  ).
Ниже представляю вам макет из трех колонок. Смотрим код css:

1
.cols{

2
    width: 1000px;

3
    margin-left: auto;

4
    margin-right:auto;

5
    overflow:hidden;

6
    _zoom:1;/*Для 6-го IE, задаем hasLayout*/

7
}

8
.cols .col1,.cols .col2,.cols .col3{

9
     padding-bottom:10000px;

10
     margin-bottom:-10000px;

11
}

12
 
13
.col1  {

14
    background-color: green;

15
    float:left;

16
    width: 300px;

17
    overflow:hidden;

18
    position:relative;

19
}

20
 
21
.col2 {

22
    background-color:blue;

23
    float:left;

24
    width: 400px;

25
    overflow:hidden;

26
    position:relative;

27
 
28
}

29
 
30
.col3  {

31
    background-color:yellow;

32
    float:left;

33
    overflow:hidden;

34
    width: 300px;

35
    position:relative;

36
 
37
}

Здесь .cols – контейнер для трех колонок с суммарной шириной этих колонок. А фокус заключается в задании div свойств:

1
.cols {

2
    overflow:hidden;

3
}

4
.всем_остальным {

5
    padding-bottom: 10000px;

6
    margin-bottom: -10000px;

7
}

Этот код растягивает блоки div до высоты контейнера. В свою очередь высота контейнера задается самой высокой колонкой. HTML-код выглядит следующим образом:

1
<html>

2
<head>

3
<style type="text/css">

4
.cols{

5
    width: 1000px;

6
    margin-left: auto;

7
    margin-right:auto;

8
    overflow:hidden;

9
    _zoom:1;/*Для 6-го IE, задаем hasLayout, на эту тему есть много постов на хабре*/

10
}

11
.cols .col1,.cols .col2,.cols .col3{

12
     padding-bottom:10000px;

13
     margin-bottom:-10000px;

14
}

15
 
16
.col1  {

17
    background-color: green;

18
    float:left;

19
    width: 300px;

20
    overflow:hidden;

21
    position:relative;

22
}

23
 
24
.col2 {

25
    background-color:blue;

26
    float:left;

27
    width: 400px;

28
    overflow:hidden;

29
    position:relative;

30
 
31
}

32
 
33
.col3  {

34
    background-color:yellow;

35
    float:left;

36
    overflow:hidden;

37
    width: 300px;

38
    position:relative;

39
 
40
}

41
</style>

42
 
43
</head>

44
<body>

45
    <div class="cols">

46
        <div class="col1">

47
            Департамент
 градостроительства при текущем ремонте не планирует обустраивать 
велоструктуру на улицах, которая предусмотрена в ходе капитального 
ремонта.

48
        </div>

49
        <div class="col2">Львовские
 велосипедисты давно ждут постройки велосипедных дорожек в городе. Эти 
надежды приобрели реальные очертания в 2007-м году, когда Львов попал в 
число городов-хозяев Чемпионата Европы по футболу 2012-го года. 
Городские чиновники обещали, что в ходе ремонта улиц, который будет 
проводиться в рамках подготовки к Чемпионату, сразу оборудуют и 
велоструктуру.

50
        </div>

51
        <div class="col3">Привет пользователь!</div>

52
    </div>

53
</body>

54
</html>
SeoEastLab