Muchas gracias por tu respuesta Mikel. He visto el ejemplo de pie de página y lo veo claro en ese ejemplo, pero luego lo aplico a mi ejemplo y no funciona, quizás no tengo claras las condiciones de los demás divs.
Para aclararlo todo, acabo de realizar rápidamente un ejemplo dónde se puede apreciar claramente el problema de pie de página y lo del posicionamiento relativo.
Es un poco largo, espero q no pase nada por copiarlo aquí, separando el documento HTML del CSS.
El documento CSS se ven 2 divs anidados dentro de otro div(absolute). Esos dos divs son los que quiero que estén a la misma altura que son: contenido-auxiliar y pagina. El contenido-auxiliar incluye un menú(no creo que perjudique en nada).
Y por último está el div bottom, que es el pie de página.
Con este ejemplo supongo que se verá mejor dónde cometo errores...
HTML:
Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prueba</title>
<LINK rel="stylesheet" href="estilo_prueba.css" type="text/css">
</head>
<body>
<div class="pageaux">
<div class="contenido_auxiliar">
<h3>menu</h3>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</div>
<div class="page">
<h2>Titulo</h2>
<p>Este texto tendria que estar a la misma altura que el</p>
</div>
</div>
<div class="bottom"></div>
</body>
</html>
CSS:
Código:
/* CSS Document */
/*ESTRUCTURA PAGINA*/
/*DIV PRINCIPAL*/
.pageaux{
padding:0;
position:absolute;
width:98%;
top: 130px;
height:800px;
background:#CCCCCC;
border-width:1px;
border-style:solid;
border-color:#596158;
}
.page{
float:left;
position:relative;
padding:0;
width:75%;
height:70%;
background:#333333;
left: -2px;
border-width:1px;
border-style:solid;
border-color:#596158;
}
/*MENU*/
.contenido_auxiliar{
//Aquí he probado de poner float:right, pero tp funciona.
position:relative;
top:0px;
margin:30px 0px 10px 80%;
text-align:center;
}
div.contenido_auxiliar UL{
list-style:none;
padding:0px;
margin:0px;
}
div.contenido_auxiliar LI{
font-weight:bold;
text-align:center;
border:solid;
padding:0;
margin-top:4px;
border-color:#596158;
border-width:1px 0px 1px 1px;
}
div.contenido_auxiliar LI a{
padding:2px;
display:block;
text-decoration:none;
color:#333333;
}
div.contenido_auxiliar LI a:hover{
background:#596158;
color:#CCCCCC;
}
/*------------------*/
/*PIE DE PAGINA*/
.bottom {
background-color: rgb(0, 102, 0);
position: absolute;
bottom: 0pt;
left: 0pt;
width: 100%;
height: 30px;
margin-bottom: -30px;
clear: both;
}