Layout liquido a 2 colonne con i CSS

[mauc]

Sto provando a seguire questa guida http://css.html.it/articoli/leggi/46...nne-con-i-css/

<style>
html,body{margin:0;padding:0}
body{font: 100.01% Verdana,Arial,sans-serif}
h1,h2,h3{font-family: "Trebuchet MS",Arial,sans-serif;margin: 0}
h1{color: #FFA54C;font-size: 200%}
h2{color: #666;font-size: 180%}
h3{color: #666;font-size: 150%}
p{margin: 0 0 0.8em 0}

div#container{min-width: 500px;  background-color:#FFA54C  ;}
div#header{height:70px;line-height: 70px;padding: 0 2%; background-color:#333;}
div#header a#skipnav{position: absolute;left: -9000px}

div#sidebar{float: left; width:29%;\width:33%;w\idth:29%; background-color:aqua ;/*box model hack semplificato*/ padding: 0 2%;font-size:80%}

div#content{position: relative;margin: 0 2% 0 35%}
div#content p{line-height:1.3}

div#footer{clear:left; background-color:#333;}
div#footer p{margin: 0;padding: 10px 0;text-align: center;font-size: 75%}
        </style>

ho fatto cosi, e il risultato e questo


vorrei però che il colore di sfondo celeste arrivasse fino al punto 2 e non si fermasse al punto 1, come fare?

[storm363]

ricarica l'immagine

[mauc]

[storm363]

aumenta l'altezza (height o min-height) del div azzurro

[mauc]

il div dell'azzuro è questo

div#sidebar{float: left; width:29%;\width:33%;w\idth:29%; background-color:aqua ;/*box model hack semplificato*/ padding: 0 2%;font-size:80%}

ma non c'è l'altezza,cosi ho messo

 height:70%;

ma c'è un problema, se il contenuto nella Colonna principale aumenta, la tabella si allunga e poi torno punto e a capo. Con una parte azzura e una parte arancione nella Colonna Secondaria.

C'è un modo che in relazione della lunghezza della colonna principale il colore nella secondaria si attivi per tutta la lunghezza?