Due colonne, altezza 100%

[Stan]

Ho un problema

     <div id="principale">
       <div id="navig">
          <h2>Tipologia</h2>

          a vela

          a motore

          yacht

          bagnarole

                    
          <h2>Cantieri</h2>

          a vela

          a motore

          yacht

          bagnarole          
       
       </div>
       <div id="risultati">
          <h2>Novità</h2>

          <div>
            <div id="box">[img]immagini/barca.jpg[/img]<a href="">

A assjhd jkhdkja hdakjhdkjhdkjad jakd hakjdh kjahd ad hakjd ak</p></div></a>
            <div id="box" class="right">A</div>
          </div>
          <div>
            <div id="box">[img]immagini/barca.jpg[/img]<a href="">

A assjhd jkhdkja hdakjhdkjhdkjad jakd hakjdh kjahd ad hakjd ak</p></div></a>
            <div id="box" class="right">A</div>
          </div>
          <div>
            <div id="box">[img]immagini/barca.jpg[/img]<a href="">

A assjhd jkhdkja hdakjhdkjhdkjad jakd hakjdh kjahd ad hakjd ak</p></div></a>
            <div id="box" class="right">A</div>
          </div>
          <div>
            <div id="box">[img]immagini/barca.jpg[/img]<a href="">

A assjhd jkhdkja hdakjhdkjhdkjad jakd hakjdh kjahd ad hakjd ak</p></div></a>
            <div id="box" class="right">A</div>
          </div>
          <div>
            <div id="box">[img]immagini/barca.jpg[/img]<a href="">

A assjhd jkhdkja hdakjhdkjhdkjad jakd hakjdh kjahd ad hakjd ak</p></div></a>
            <div id="box" class="right">A</div>
          </div>
       </div>
     </div>

principale contiene al suo interno "navig" e "risultati"
Navig a sinistra è la navigazione, con un bordo a destra, risultati è il contenitore con tutti i box risultati.

Il problema è che non riesco a farli andare di pari passo, tipo che se navig è meno alto di risultati, tutti i box oltre l'altezza di navig mi vanno a sinistra.

i div box contengono un float left

incollo anche il css

div #box {
	float:left;
	margin: 9px;
	margin-left:0;
	border: 1px solid #000;
	width: 295px;
	height: 95px;
	
	font-weight: normal;
	font-size: 11px;
}

#box a {
	color: #666;
	text-decoration: none;
}
#box p {
	padding: 5px;
}

#box img {
	border:0;
	padding-right: 5px;
	float:left;
}

#box.right {
	margin-right: 0;
}

#principale{
	margin-top:10px;
	//height: 100%;	
}

#navig {
	border: 1px solid #0F0;
	border-right: 1px dotted #CCC;
	width: 290px;
	float:left;
	margin-right: 10px;
	height: 100%;
}

#navig a{
	line-height: 17px;
	margin-left: 20px;
	color: #666;
	text-decoration:none;	
}
#navig a:hover{
	color: #000;
	text-decoration:underline;
}

#risultati{
	border: 1px solid #C00;
}

Un'altra cosa che mi piacerebbe risolvere è questa, il div principale è messo così

  <div id="tabella">
   <div id="tabup"></div>   
   <div id="tabcx">
       <div id="offerte"></div>
       <div id="principale"></div>
   </div>
   <div id="tabdw"></div>   
  </div>

Solo che come vedere tabcx (che è il pattern bianco, non mi prende un altezza relativa (tipo 100%) ma solo in px. Posso rimediare?