Создание вертикального пространства в CSS

Question

Итак, у меня есть поле в центре страницы (вертикально и горизонтально) с фиксированной высотой (200 пикселей)

Содержит два элемента произвольной высоты. Я хочу, чтобы один был закреплен наверху, а другой - на дне коробки.

CSS3 подходит для этого, поэтому, пожалуйста, используйте его, если таблица стилей более понятна.

Answer 1

HTML:

   <div id="outer">
        <div class="top">
        </div>

        <div class="bottom">
        </div>
    </div>

Стиль:

#outer {
    width:100px; /* whatever */
    height: 200px;
    position:relative;
}

.top {
    position:absolute;
    top:0px;
}

.bottom {
    position:absolute;
    bottom:0px;
}