kłopot sidebarem i stopką

Witam wszystkich.

Na stronie którą tworzę miałam kłopot z sidebarem. Chciałam aby przyjmował długość contentu. Znalazłam w necie taką sztuczkę:
"Można to zrobić w CSS. Dodaj do stylów tych divów które będą obok siebie takie linijki ( w CSS )

//overflow:hidden;
padding-bottom: 20000px;
margin-bottom: -20000px;//

Daj tez do diva #container linię: overflow:hidden; podobnie jak do divów leżących obok siebie."

Zastosowałam sztuczkę. Pojawił się za to problem ze stopką, która zlała się z contentem. :(
Proszę o pomoc.
Pozdrawiam.

PS. mój kod:

#sidebar
{
	float:left;
	width: 150px;
	min-height: 300px;
	padding: 20px;
	background-color:lightgray;
	text-align: center;
	font-size: 18px;
	border-right: 2px dotted #666666;
	overflow:hidden;
	padding-bottom: 20000px;
	margin-bottom: -20000px;
	
}

#content
{
	float:left; 
    padding: 20px;
	width: 767px;
	background-color: #dedede;
	min-heigh: 680px;
	text-align:justify;
	overflow:hidden;
	padding-bottom: 20000px;
	margin-bottom: -20000px;
	
}

#footer
{
	clear:both;
	color:white;
	text-align:center;
	padding:20px;
	font-size:18px;

Nie stosuj takich sztuczek. Jest wiele sposobów by to zrobić, ważne by nie kombinować, bo potem wyjdą niepożądane skutki uboczne i zrobić tak, by strona wyglądała ok nie tylko dla jednej rozdzielczości.
Tu masz przykład, ktoś miał podobny problem:
http://stackoverflow.com/questions/20285686/how-to-make-sidebar-with-same-height-as-the-content-div

Tak to wygląda: http://jsfiddle.net/yJbUW/110/