Hola
comacuatro
Partiendo de tu tabla (que necesita ser revisada a fondo) he hecho esto:
Haz un copy-paste y lee los comentarios (lo que intentas hacer está lleno de contradicciones):
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Empresas</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}
body {
background-color: #FFFF99;
}
td, th {
background-color: #FFFFFF;
}
#caja {
width: 380px;
margin: 0 auto;
margin-top: 20px;
}
#tabla {
float: left;
}
#referencia {
width: 6px;
height: 219px;
background-color:#0099FF;
float: right;
}
#clear {
clear:both;
margin-top: 15px;
}
</style>
</head>
<body>
<!-- Para esto no uses tablas, hazlo en divs y css -->
<!-- Antes que nada, trabaja bien tu código y dale coherencia a los valores, un doctype adecuado (este código no valida). Este diseño tuyo NO NECESITA SER EN TABLAS, puedes hacerlo fácilmente en divs y css -->
<!-- Esta tabla, sin conocer el detalle de su aplicación, tiene muchas cosas que le sobran: No es necesario usar celdas para distribuir textos -->
<div id="caja">
<div id="tabla">
<table width="350" height="219" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="36" height="96" rowspan="2"> </td>
<td width="7" rowspan="4"></td>
<th width="297" height="60" colspan="3">
<h5>empresas</h5></th>
<td width="10" height="60px"> </td>
</tr>
<tr>
<td width="297" height="36px" colspan="3">
<h4>Comparta un momento de alta gastronomía en la intimidad de su empresa. Sorprenda a sus colaboradores y clientes brindándoles <br />
una comida de prestigio (calidad) llevada a cabo por nuestro <br />
equipo de profesionales. <br />
METIZ trae el talento a su mesa<br />
<!-- es imposible que esta celda tenga 36px de altura con tanto texto: sin aplicarle estilo al texto sale una altura de 136px -->
</h4></td>
<td width="10"> </td>
</tr>
<tr>
<td width="36" height="123px" rowspan="2"> </td>
<td width="10" height="30"><h6>[</h6></td> <!-- para qué sirve esta celda -->
<td width="165" height="30">
<ul> <!-- me pregunto porqué pones aquí una lista -->
cocktails - almuerzos y cenas <!--el height de esta celda es imposible porque no entra el párrafo (y se estira a 40px-->
</ul>
</td>
<td width="122" height="30"><h6>]</h6></td> <!-- para qué sirve esta celda -->
<td width="10" height="123px" rowspan="2"></td>
</tr>
<tr>
<td width="297" height="93" colspan="3"><h4>Si usted desea agasajar a clientes, proveedores o<br />
colaboradores con un evento original METIZ ofrece sus <br />
variados cócteles, ideales para esta ocasión.</h4></td>
</tr> <!--falta este cierre -->
</table>
</div>
<div id="referencia"></div>
<div id="clear"></div>
<p>La medida azul de la derecha tiene 219px de altura y es la medida que le das a la altura de la tabla. Como ves, con tanta información es imposible que la altura se mantenga. Consecuencia: la tabla se estira.</p>
<p>Si lo que quieres es que los textos que pones dentro de las celdas respeten una altura determinada, es necesario que los metas dentro de un div con esa medida y overflow: auto</p>
</div>
</body>
</html> Comenta algo
Bye