colocar el 3er div

[booble]

hola, he estado probando las diferentes formas de alinear 3 divs en horizontal dentro de un contenedor pero no consigo una manera facil, seguramente se podrá metiendolo dentro de otro div, pero me pregunto si habria otra manera mas facil.

esto es lo que tengo y se descuadra al final:

Código HTML:

<div id="contenedor">
<div id="top"><img src="imagenes/b1_s1.jpg" alt="" width="900" height="307" /></div>
  <div id="laterizq">IZQUIERDA</div>
  <div id="centro">CENTRO</div>
  <div id="derecha">DERECHA</div>
</div> 

Código:

#contenedor {
	width: 900px;
	margin: 0 auto;
	background-color: #090;
	height: 400px;
	padding: 0;
#top {
	background-color: #09F;
	height: 307px;
	width: 900px;
	float: right;
	margin: auto;
}
#laterizq {
	background-color: #F00;
	width: 250px;
	float: left;
}
#centro {
	width: 510px;
	background-color: #F90;
	margin-left: 250px;
}
#derecha {
	background-color: #FF0;
	width: 140px;
	float: right;
}

[SPAWN3000]

Busca en GOOGLE 960 grid Framework...

[Carlangueitor]

A ver ponlo así:

Código CSS:

#contenedor {
    width: 900px;
    margin: 0 auto;
    background-color: #090;
    height: 400px;
    padding: 0;
#top {
    background-color: #09F;
    height: 307px;
    width: 900px;
    float: right;
    margin: auto;
}
#laterizq {
    background-color: #F00;
    width: 250px;
    float: left;
}
#centro {
    width: 510px;
    background-color: #F90;
    float:left;
}
#derecha {
    background-color: #FF0;
    width: 140px;
    float: right;
}
 

Y no pongas las medidas en el HTML, ya lo tienes en el CSS (aunque diferentes por cierto).

Iniciado por SPAWN3000

Busca en GOOGLE 960 grid Framework...

Eso a que viene???

Saludos

[eZakto]

Yo creo que se arregla editando el HTML, poniendo los dos flotantes antes del contenedor:

Código HTML:

<div id="contenedor">
<div id="top"><img src="imagenes/b1_s1.jpg" alt="" width="900" height="307" /></div>
  <div id="laterizq">IZQUIERDA</div>
  <div id="derecha">DERECHA</div>
  <div id="centro">CENTRO</div>
</div>
 

[booble]

Iniciado por Carlangueitor

A ver ponlo así:

Código CSS:

#contenedor {
    width: 900px;
    margin: 0 auto;
    background-color: #090;
    height: 400px;
    padding: 0;
#top {
    background-color: #09F;
    height: 307px;
    width: 900px;
    float: right;
    margin: auto;
}
#laterizq {
    background-color: #F00;
    width: 250px;
    float: left;
}
#centro {
    width: 510px;
    background-color: #F90;
    float:left;
}
#derecha {
    background-color: #FF0;
    width: 140px;
    float: right;
}
 

Saludos

Lo he mirado y creo que es lo mismo que tengo puesto, no veo diferencia. Ya arregle lo del height.

[booble]

Iniciado por eZakto

Yo creo que se arregla editando el HTML, poniendo los dos flotantes antes del contenedor:

Código HTML:

<div id="contenedor">
<div id="top"><img src="imagenes/b1_s1.jpg" alt="" width="900" height="307" /></div>
  <div id="laterizq">IZQUIERDA</div>
  <div id="derecha">DERECHA</div>
  <div id="centro">CENTRO</div>
</div>
 

Eso ya lo habia probado, y que va, lo he intentado borrandolo todo y poniendolo en ese orden y de mil maneras y nada...

[booble]

ok amigos, he probado a quitarle el div de arriba "top" y ahora si se encaja con esto asi, osea como lo tenia ya antes.

Código:

#laterizq {
	background-color: #F00;
	width: 250px;
	float: left;
}
#centro {
	width: 510px;
	background-color: #F90;
	margin-left: 250px;
}
#derecha {
	background-color: #FF0;
	width: 140px;
	float: right;
}

¿¿¿¿Pero porque pasa esto????

[booble]

vale, creo que el fallo es que en dreamweaver se ve mal, pero en el explorador bien.

¿hay alguna manera de qrreglarlo en dreamweaver para que salga derecho para que no este tan desordenado?

[Carlangueitor]

El código que te di no es igual, pero bueno....

[booble]

gracias de todas formas

[JulioRFA]

Check this out

http://www.dynamicdrive.com/style/layouts/

(ayayay... muy ingles xD)

Ahi hay layouts de columnas... te puedes inspirar de ahí ;)

[booble]

es una buena guia, buena pagina.