A ver, lo que he intentado de hacer es difícil de explicar con palabras, así es que creo que os voy a pegar el código para facilitaros las cosas... (si es que soy capaz :roll: ).
Es un poco largo, pero puede merecer la pena. Finalmente he optado por utilizar DIVs y Tablas. Perdonad por los colores que utilizo, pero es sólo una prueba que he hecho para mi y que ahora pongo en común. A mi me ha servido para entender mejor el funcionamiento de los DIVs.
Primero lo pensé y lo dibujé en papel. Digo esto, porque creo que es importante a la hora de ponerse a diseñar. Si quereís ver el resultado, copiad cada fichero y ejecutadlo, ya vereis.....
Primero la hoja de estilos:
body {background-color:purple ; }
#general { BACKGROUND-COLOR:blue ; BORDER: #000 1px solid ; WIDTH: 800px ;
padding: 10px 10px 10px 10px ; }
#cabecera { BACKGROUND-COLOR:#00bbff ; BORDER: #000 1px solid ; WIDTH: 790px
; padding: 5px 5px 5px 5px ; }
#logo { BACKGROUND-COLOR:#00bbff ; BORDER: #000 1px solid ; WIDTH: 250px
; }
#resto-ca { BACKGROUND-COLOR:#00bbff ; BORDER: #000 1px solid ; width: 531px
; float: right ; }
#contenido { BACKGROUND-COLOR:#00bbff ; BORDER: #000 1px solid ;
WIDTH: 790px ; padding: 10px 5px 15px 5px ;
margin: 5px 0px 5px 0px ; }
#titulo { BACKGROUND-COLOR:#00bbff ; BORDER: #000 1px solid ;
WIDTH: 779px ; text-align: center ; margin: 2px 4px 2px 4px ; }
#menu { BACKGROUND-COLOR:#00bbff ; BORDER: #000 1px solid ; WIDTH: 240px
; }
#texto { BACKGROUND-COLOR:#00bbff ; BORDER: #000 1px solid ; width: 534px
; text-align: justify ; }
#pie { BACKGROUND-COLOR:#00bbff ; BORDER: #000 1px solid ; WIDTH: 790px
; padding: 10px 5px 15px 5px ; margin: 5px 0px 5px 0px ; }
#est { BACKGROUND-COLOR:#00bbff ; BORDER: #000 1px solid ; WIDTH: 125px
; float: left ; margin: 0px 2px 0px 0px ; }
#busca { BACKGROUND-COLOR:#00bbff ; BORDER: #000 1px solid ; WIDTH: 325px
; float: left ; margin: 0px 2px 0px 0px ; }
#varios { BACKGROUND-COLOR:#00bbff ; BORDER: #000 1px solid ; WIDTH: 170px
; float: left ; margin: 0px 2px 0px 0px ; }
#resto-p { BACKGROUND-COLOR:#00bbff ; BORDER: #000 1px solid ; width: 150px
; float: left ; }
table.contenido { width: 99% ; }
td.men { width: 260px ; }
td.tex { width: 520px ; }
Y ahora la página:
<HTML>
<HEAD>
<title>Miniproyecto</title>
<LINK rel="stylesheet" href="estilos.css" type="text/css" media="all">
</HEAD>
<BODY>
<DIV id="general">
<DIV id="cabecera">
<DIV id="resto-ca">
Y aquí el resto de la cabecera: publi, etc.</p>
</DIV>
<DIV id="logo">
Aquí va el logo</p>
</DIV>
</DIV>
<DIV id="contenido">
<div id="titulo">
Este es el título de la página</p>
</div>
<table class="contenido">
<tr>
<td class="men" valign="top">
<div id="menu">
Ahora el menu
opción 1.
Opción 2.
...
Opción N.</p>
</div>
</td>
<td class="tex">
<div id="texto">
Y, por último, aquí se cuenta lo que haya que contar
Se ponen fotos, enlaces, etc.</p>
Por supuesto, caben todos los párrafos que se deseen</p>
Incluso, grupos de fotos, en fin, lo que quieras!!!</p>
Es curioso, que sea necesario poner primero la capa que
flota a la derecha, antes que la que queda a la izquierda
(pero ¡ojo!, que la de la izquierda no flota). Habrá que ver
cómo consigo lo que quiero en la parte de abajo!!!!</p>
</div>
</td>
</tr>
</table>
</div>
<div id="pie">
<table width=100%>
<tr>
<td>
<div id="est">
Contador!</p>
</div>
<div id="busca">
Barrita de Google</p>
</div>
<div id="varios">
Otras cosas que se me ocurran (banners, etc)</p>
</div>
<div id="resto-p">
Y por si se me olvida algo, jejejeje</p>
</div>
</td>
</tr>
</table>
</div>
</DIV>
</BODY>
</HTML>
Saludos!!!! (Y perdón por la extensión)
