Имеется следующий макет:
+-----------------+-------+
| | |
| left | right |
| | |
+-----------------+ |
| footer | |
+-----------------+-------+<div id="leftContainer">
<div id="left"></div>
<div id="footer"></div>
</div>
<div id="right"></div>
слой footer должен быть всегда в самом низу, независимо о того, на сколько растянуты содержимым слои left или right.
как написать кросс-браузерную css для данного макета?
я делал так:
html, body {
height: 100%;
}
#leftContainer {
height: 100%;
width: 500px;
float: left;
}
#left {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#footer {
height: 40px;
}
таким способом не работает. Если, например, в слое right текст не помещается на один экран, то слой footer не опускается