Se me descuadran las columnas

[ma_miranda19]

hola, estoy con una pagina en la que tengo una cabecera que tiene el logo de la parte de arriba y dos menus laterales, uno a cada lado, este es el header:

Código HTML:

<link href="estilo.css" rel="stylesheet" type="text/css" />

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td width="179" ><img src="images/cabecera1.jpg" alt="Autos76" width="179" height="85" /></td>
    <td><img src="images/cabecera3.jpg" width="179" height="85" /></td>
    <td bgcolor="#FFFFFF"><div align="center"><img src="images/cabecera2.jpg" alt="Autos76" width="289" height="85" /></div></td>
    <td width="10%">&nbsp;</td>
  </tr>
</table>
<!--<hr noshade="noshade" color="#0000FF" />-->

<div class="menuiz" id="M1" style="float:left" lang="es">
<table width="130" cellpadding="15" cellspacing="0" border="0" >
  <tr>
    <td height="30"><a href="index.php" >inicio</a></td>
  </tr>
  <tr>
    <td height="30"><a href="instalaciones.php" >instalaciones </a></td>
  </tr>
  <tr>
    <td height="30"><a href="contacto.php" >contacto</a></td>
  </tr>
  <tr>
    <td height="30">Lista de Espera</td>
  </tr>
  <tr>
    <td height="30">Libre</td>
  </tr>
  <tr>
    <td height="500">&nbsp;</td>
  </tr>
</table>

</div>
<div class="body" style="float:right" >
<table width="150" border="0" bgcolor="#963731">
  <tr>
    <td height="150"><a href="visitas.php"><img src="images/visto.jpg" alt="Los más vistos" width="150" height="150" /></a></td>
  </tr>
  <tr>
    <td height="150"><a href="nuevos.php"><img src="images/recientes.jpg" alt="Recientes" width="150" height="150" /></a></td>
  </tr>
  <tr>
    <td height="150">&nbsp;</td>
  </tr>
  <tr>
    <td height="150">&nbsp;</td>
  </tr>
  <tr>
    <td height="150">&nbsp;</td>
  </tr>
</table>
</div> 

y por otra parte en el index tengo esto que deberia ir en la columna central:

Código HTML:

<div title="menu central" style="float:none">
<div align="center"><img src="images/exposiciones.JPG" alt="Exposiciones" width="650" />
</div>
<form action="busqueda.php" method="post">
<table align="center" border="0">
<tr>
<td align="right">
<select name="precio" style="width:220px">
<option selected="selected" value="todos">Precio (Cualquiera)</option>
<option value="precio >= 0 and precio <= 3000">De 0 € hasta 3.000 €</option>
<option value="precio >= 3001 and precio <= 6000">De 3.001 € hasta 6.000 €</option>
<option value="precio >= 6001 and precio <= 9000">De 6.001 € hasta 9.000 €</option>
<option value="precio >= 9001 and precio <= 12000">De 9.001 € hasta 12.000 €</option>
<option value="precio >= 12001">M&aacute;s de 12.001 €</option>
</select>
</td>
</tr>
</form>
</table>
</div> 

y la clase del menuizq contiene lo siguiente:


.menuiz {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: capitalize;
color: #993333;
background-color: #EBC2C2;
text-align: left;
text-decoration: none;
}

y el body:

.body {
font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
background-image: url(logos.jpg);
}

y todo va perfecto hasta que haces mas pequeña la ventana y la parte central se desplaza hacia abajo, me podeis ayudar por favor, gracias por adelantado.

[sweetlydark]

Esto pasa por que todo los elementos no caben en el espacio nuevo del navegador y como el ultimo que esta colocado en el codigo es el parte central pues lo acomoda mas abajo. Podrias colocar otro elemento a lo ultimo o:

Solo tienes dos opciones para evitar esto. Hacer que los elementos se reducen dinamicamente con el nuevo espacio (lo cual es un dolor de cabeza intentar que queden bien) o colocar todos los elementos estaticamente (lo cual tendras que escribir exactamente donde el la pantalla quieres cada elemento).

Esos son los dos que se me ocurren, todo depende de que quieres.