Cambiar estructura HTML en estructura de 3 columnas

[pzin]

Muy buenas y perdonen la redundancia .

Tengo una estructura de tres columnas, las dos exteriores son de ancho fijo y la del centro es de ancho variable, según resolución del navegador.

Funciona correctamente, el único problema con el que me topo es que en el HTML tengo que anteponer las columnas laterales a la del contenido, y realmente quedaría mejor si es justamente al revés.

Lo que tengo es algo así:

Código html:

<div id="left">
menú izquierda
</div>
 
<div id="right">
menú derecha
</div>
 
<div id="central">
Contenido
</div>
 

Código css:

#central{
margin-left:200px;
margin-right:400px;
}
 
#left{
float: left;
width: 200px;
}
 
#right{
float:right;
width:300px;
}
 

Y me gustaría tener las capas left y right por debajo de central, pero si lo hago tal cual, right y left se posicionan debajo de central y no al lado.

Saludos y gracias.

[Triby]

Busca en www.araudi.net, Mikmoro creo algunos ejemplos de diseño a 3 columnas, solo copias el codigo fuente y lo adaptas a tus necesidades.

[talmente]

Hola, te paso un codigo con el que puedes empezar:

Código:

  #central{
	background: #999999;
	width: 54%;
	float: left;
}

   
       
  
      #left{
	float: left;
	width: 200px;
	background: #0033CC;   
      }
  
       
 
      #right{
	float:right;
	width:302px;
	background: #009966;
      }

HTML:

<div id="left">
menú izquierda
</div>

<div id="central">
Contenido
</div>   

<div id="right">
menú derecha
</div>

[pzin]

Gracias Triby, tiene ejemplos interesantes, pero para lo que yo necesito, tiene practicamente el mismo código. Uhm...

talmente creo que tu código no funcionaría ya que right estaría debajo del resto del contenido. Eso sí, a la derecha.

El asunto es poner el contenido de la capa central por encima de las otras, ya que es el contenido principal. Por cosas del SEO más que otra cosa.

[talmente]

OK, yo te lo mando con medidas en % tu te lo acoplas a lo que quieras:

Código:

 


#contenedor {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background: #CC99CC;
	float: left;
	position: relative;
}

#contenedor #contenido {
	width: 50%;
	position: relative;
	left: 25%;
	background: #990000;
	float: left;
}
#contenedor #right {
	float: right;
	width: 25%;
	background: #996600;
	clear: right;
}
#contenedor #izq {
	background: #0099CC;
	position: relative;
	left: -50%;
	width: 25%;
	float: left;
}

HTML:
<div id="contenedor">
<div id="contenido"> 
Contenido
</div>

<div id="izq">
menú Izq</div>

<div id="right">
menú derecha</div>
</div>

A ver qué tal

[pzin]

Muchas gracias.

Me pelearé un rato para que #contenido tenga una medida flexible y right y left medidas fijas, pero si que me sirve.