Граждане, хелп! Схожу с ума.

Короче, суть проблемы такова: есть двухколоночный страниц - шапк, левый блок (основной), правый блок (сайдбар, фиксированная ширина), блок-прижиматель футера к низу, ну и - прижатый им к низу футер. Так вот, основной (левый) блок прекрасно тянется в высоту насколько нужно и прижимает футер, а правый - сайдбар (точнее даже не сайдбар, а параграф внутри него) - этот самый футер прекрасненько протыкает. И висит там под футером как... неприличное что-то, ей-богу. Чего только ни пробовал - ничего не понимаю!

Короче, код:




[CSS]html, body{
margin:0;
padding:0;
width:100%;
height:100%;
}

#header{
height:80px;
width:100%;
background-color:yellow;
}


#content{
position:relative;
min-height:100%;
height:auto !important;
height:100%;
text-align:justify;
background-color:green;
}

#content p{
padding:10px 15px 10px 7px;
margin:0;
}

#content .empty{
height:50px;
position:relative;
border:1px black dotted;
}


#background{
position:absolute;
top:80px;
right:250px;
bottom:0;
left:0;
background-color:white;
}

#main{
position:relative;
min-height:100%;
height:100%;
margin-right:250px;
background-color:fff;
}

#sidebar{
width:250px;
position:absolute;
top:80px;
right:0;
}

#sidebar p{
margin:10px;
background:blue;
}

#footer{
position:relative;
margin-top:-20px;
height:20px;
width:100%;
background-color:brown;
text-align:center;
}[/CSS]

Содержимое колонок оставил специально, наглядности для, из кода же постарался всё лишнее убрать, но если где-то какие-то следы экспериментов - уж не обессудьте!


Вот примеры добавил:
Просто страница
Хорошая, годная страница (сайдбар короче и всё норм)
Плохая страница (сайдбар пробил футер)

Цвета специально вырвиглазные, для наглядности же))