Absolute y relative

ordsanmi · #1 (**permalink**) 07/07/2006, 21:04

Hola Tengo un problema con un menu.
Tengo una web con dos columnas, la de la izquierda tiene este formato (es un menu)
#avmenu {
FLOAT: left;
WIDTH: 140px;
position: absolute;
left: 4px;
top: 15px;
}
y la otra es

#seccioncolumna1extends{
width:540px;
left: 150px;
position: relative;
padding: 15px 0px;
margin: 0px;

}

y justo despues tengo un pie de pagina que es relative

El problema viene cuando el menu la capa "avmenu" se hace más larga que la #seccioncolumna1extends, y el menu se solapa con el pie de página

Si la pongo como relative no tengo problema, pero entonces la segunda columna debo ponerla como absolut y estamos en las mismas

Alguna ayuda?

Muchas Gracias

joaquin_win · #2 (**permalink**) 09/07/2006, 16:17

Aunque no soy muy fanatico de hacerlo con floats (especialmente por culpa de el internet explorer) creo que esta es la manera de hacerlo. Aun no he encontrado como hacerlo sin floats.

Código HTML:

<html>
<head>
<style>
#todo {
width:80%;
margin:auto;}

#menu {
background:blue;
font-size:6px;
width:20%;
float:left;
}
#contenido {
background:green;
width:80%;
float:left;
}

#pie {
clear:both;
width:100%;
background:red;
}
</style>

</head>
<body>
	<div id="todo">
		<div id="menu">
y justo despues tengo un pie de pagina que es relative<br>
<br>
El problema viene cuando el menu la capa "avmenu" se hace más larga que
la #seccioncolumna1extends, y el menu se solapa con el pie de página<br>
<br>
Si la pongo como relative no tengo problema, pero entonces la segunda columna debo ponerla como absolut y estamos en las mismas<br>

<br>
Alguna ayuda?
		</div>
		<div id="contenido">
y justo despues tengo un pie de pagina que es relative<br>
<br>
El problema viene cuando el menu la capa "avmenu" se hace más larga que
la #seccioncolumna1extends, y el menu se solapa con el pie de página<br>
<br>
Si la pongo como relative no tengo problema, pero entonces la segunda columna debo ponerla como absolut y estamos en las mismas<br>

<br>
Alguna ayuda?
		</div>
		<div id="pie">
y justo despues tengo un pie de pagina que es relative
		</div>
	</div>
</body>
</html>

joaquin_win · #3 (**permalink**) 09/07/2006, 16:19

Otra cosa, es recomendable que uses nombres de clase y de id que tengan algun significado claro y preciso. "contenido" es mucho mejor que seccioncolumna1extends.

Saludos.

ordsanmi · #4 (**permalink**) 10/07/2006, 19:07

Si al final la clave era el clear:both;

muchas gracias, lástima que encontre la solución antes de que contestaras

Saludos!

joaquin_win · #5 (**permalink**) 11/07/2006, 19:32

La solución siempre esa ahí :P

joaquin_win · #6 (**permalink**) 11/07/2006, 19:32

Si encuentras una solución sin floats sería interesante verla.