Duda Urgente Posicionamiento Tres Columnas

[felix_h]

Hola. Estoy intentando crear la típica pagina web,con tres columnas, cabecera y footer. Quiero declarar el div central primero( donde irá el contenido) y luego declarar las dos columnas laterales ( dos barras de navegación).

El problema esta en no usar el orden de siempre:

<div id="columna_izq">
<div id="columna_derecha">
<div id="centro">

sino, que al querer poner otro orden, se me bajan las dos laterales, y no hay forma de ponerlas en su sitio.

Mi idea sería poder declarar así:

<div id="centro">
<div id="columna_izq">
<div id="columna_derecha">

Si pudiese declararlo de esta manera, siempre que se deshabilite CSS, lo primero en aparecer es el bloque de Contenido, que es lo que me interesa que aparezca primero.

Os pongo el Css que he utilizado:

Código HTML:

#contenedor {
  
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	/* border: solid 1px #000; */
	background:url(general/back-header2.png)	repeat-x top left #FFF;
		
	}

#columna-izquierda {
	float: left; 
	width: 170px;
	color: #fff;
	/* background: green; */
	padding: 10px;
	
	
	}

#centro {
    float:none;
	width: 460px; 
	margin-top:20px;
	margin-left: 200px;
		color: #000;
	background: #eee; 
	padding: 10px;
	border: solid 1px #aaa;
	
	}

#columna-derecha {
	float: right;
	width: 180px;
	color: #000;
	 /* background: #ff6; */ 
	padding: 10px;
	
	}

Muchas gracias de antemano por echarle un vistazo, y a ver si logramos sacar el fallo, que no logro pillarlo, y estoy seguro que es porque no domino bien el posicionamiento.

[DoPeY-BBS]

Mira este ejemplo

Código HTML:

<div id="container">
<div id="header ">
<h1>Título </h1>
<h2 >Subtítulo </h2>
</div>
<div id="sidebar">
<h3 >Sección </h3>
<p>Bla bla ... </p>
</div>
<div id= main">
<h3 >Sección </h3>
<p>Contenido principal </p>
</div>
<div id="footer">
<p>Pie de página </p>
</div >
</div > 

#container
Esta capa es un contenedor para el resto de la página. Establece
la anchura de todo y es la que centra el contenido. El truco
está en usar auto dentro de margin para lograr el centrado. Esto
no funciona en el IE, así que tendremos que echar mano de
text-align: center en el body. El CSS completo es este:

Código HTML:

body {
text-align: center;
}
# container {
width: 700 px;
margin: 0px auto;
text-align: left;
}

Para la barra lateral utilizas

Código HTML:

float: left;

ahora bien. para que el footer te quede abajo utiliza

Código HTML:

clear: both;

NOTA

:tu puedes alterar el orden en que quieras que aparezcan los elementos siempre y cuando tomes esa precauciones.

[felix_h]

Muchas gracias, pero No me sirve. En tu ejemplo, tenemos un contenedor, y dentro de el, una cabecera, una barra lateral, un cuerpo principal para el contenido, y un footer. Y todo ello ordenado ( divs) por ese mismo orden.

Sin embargo, mi ejemplo, el que me da problemas, es poder poner tres columnas, donde la central es el contenido.

Como veis, he puesto el div del contenido en función de las otras dos barras. colocando una float: left y la otra float: right, y el resto de espacio para el contenido. ( en el style css) Sin embargo, al declarar en el HTML las divs, tengo que declararlas por el orden tipico:

contenedor
cabecera
1. barra lateral izquierda
2. barrla lateral derecha
3. contenido
footer

Porque al ponerlo en el orden que me interesa:

contenedor
cabecera
1.contenido
2.barra lateral izquierda
3.barra lateral derecha
footer

SE BAJAN las COLUMNAS LATERALES. como si todo el contenido central ocupase todo.



¿Se puede hacer que este orden ( en divs) no afecte a lo visualizado cuando la plantilla CSS esté ACTIVADA.? Es decir, conseguir declarar en el HTML las etiquetas DIVs en el orden que yo quiera, sin que afecte al orden visualizado????

Menudo lio, jejeje.




No se si logro explicarme, si no es asi, intentare subir a alguna web el caso que me sucede, para que podais verlo mas claramente.

[hades87]

le has dado un ancho a todas las columnas?

[DoPeY-BBS]

Mira esta web

http://www.inconcientecolectivo.cl/layouts/
No pude dar con tu problema en especifico, a mi me paso lo mismo que a ti, de hecho creía que lo había arreglado pero se me descuadro.

[felix_h]

Oye, Genial la pagina. Ya con eso, he podido solucionarlo, Muchas gracias.

Aunque una lastima no saber porqué pasan estas cosas tan raras.jejeje

Gracias.