XHTML——————–

<div id=»container»>
<div id=»left»><h2>Here is a lot of content</h2></div>
<div id=»right»><ul><li>Menu Item</li></ul></div>
</div>

CSS——————–

#container{
width:760px;
margin: 0 auto;
}
#left{
width: 560px;
min-height: 500px;
float:left;
background: #FFFFFF;
border-right: 200px solid #9999FF;
}
#right{
width: 200px;
float:left;
color: #FFFFFF;
margin-left: -200px;
}

У нас есть общий блок контейнер фиксированой ширины 760px. Внутри него еще два контейнера. Левый для контента – 560px, правый для меню – 200px.

Фишка в том, чтобы создать левый блок с заданой шириной в 560px, добавить справа border шириной в 200px и цветом, который мы хотим видеть фоном для меню, а потом наложить на этот бордер наш блок с меню. Оба внутрених блока должны быть float:left, и иметь фиксированую ширину. У блока #left как мы сказали будет margin-right: 200px того цвета, который нам нужен, а у блока #right будет отрицательный margin, который в сочетании с float:left, позволит нам спозиционировать блоки в так как нам нужно. Есть один важный момент. У блока #left должна быть задана минимальная высота. Для Файрфокса и 7-ого Интернет Эксплорера это не проблема. Благо оба поддерживают min-height, а вот для IE 6 надо прописать height с помощью Star HTML хака:

* html #left{
height:500px;
}

В случае если контент по высоте будет больше чем 500px, то ИЕ6 проигнорирует css-правило и растянет блок.
Что если нам надо прижать какой-либо элемент, блок или картинку, к нижней части правого блока, а мы не знаем какова будет его конечная высота? Ответ будет тем же – отрицательный margin.

В коде, после блока #right добавим следующие строки:

<div id=»inner»>Here is bottom block</div>

А затем в CSS мы спозиционируем его таким образом: float:right, для того чтобы прижать его к правому краю, и отрицательный margin-top со значением равным высоте вставляемого блока.

#inner{
width: 200px;
height: 150px;
background: #99FFCC;
float: right;
color: #FFFFFF;
margin-top: -150px;
}

Теперь абсолютно не важно какой высоты будут оба блока, блок #inner будет всегда прижат к нижнему правому краю.