[SOLUCIONADO] Div izquierdo igual que derecho

[RaulCDT]

Tengo un pequeño problema:

Código CSS:

#contenido {
  float: left;
  width: 995px;
  background: #fff
}
#contenido #izquierda {
  float: left;
  width: 670px;
}
 
#contenido #derecha {
  float: left;
  width: 325px;
  background: #000
 
}
 

Por ejemplo tengo en #izquierda contenido que ocupa de height X no se sabe el valor porque es según contenido.. y en el lado #derecha no tengo contenido pero quiero que ocupe el mismo espacio height que #izquierda porque tiene un fondo de color distinto...

Que puedo añadir?

Gracias!

[pzin]

Prueba imitando una tabla.

Código CSS:

#contenido {
  display: table;
}
 
#izquierda, #derecha {
  display: table-cell;
}
 

Así ambos elementos tendrán la misma altura.

Hay otras soluciones, pero ya dependerán más del contexto y de lo visual también.

[RaulCDT]

Y para que el contenedor este centrado y no en el lado izquierdo? Es decir la web este en el centro

Código CSS:

#contenedor {
  width:995px;
  height: auto;
 
}
 

[RaulCDT]

Iniciado por pzin

Prueba imitando una tabla.

Código CSS:

#contenido {
  display: table;
}
 
#izquierda, #derecha {
  display: table-cell;
}
 

Así ambos elementos tendrán la misma altura.

Hay otras soluciones, pero ya dependerán más del contexto y de lo visual también.

Añadiendo eso me cambia el color de izquierda y lo pone como el color de contenido #fff en vez de #000 como tengo en #derecha

[pzin]

Pues como siempre, con márgenes laterales automáticos:

Código CSS:

margin: 0 auto;
 

[pzin]

Iniciado por RaulCDT

Añadiendo eso me cambia el color de izquierda y lo pone como el color de contenido #fff en vez de #000 como tengo en #derecha

No tienes que añadir, sino mirar qué cambiar.

Fíjate:

[RaulCDT]

Si pero si en la pagina tengo una semejante así:

Código HTML:

<div id="contenido">
*/ primera fila*/
    <div id="izquierda">textx</div>
    <div id="derecha">wooohaaa</div>
*/ segunda fila */
    <div id="izquierda">textx</div>
    <div id="derecha">wooohaaa</div>
</div> 

Si lo dejo así crea varias columnas..

[pzin]

Iniciado por RaulCDT

Si pero si en la pagina tengo una semejante así:

Código HTML:

<div id="contenido">
*/ primera fila*/
    <div id="izquierda">textx</div>
    <div id="derecha">wooohaaa</div>
*/ segunda fila */
    <div id="izquierda">textx</div>
    <div id="derecha">wooohaaa</div>
</div> 

Si lo dejo así crea varias columnas..

Cosa que no habías comentado y que realmente está mal hecha, porque los identificadores sirven para identificar elementos, luego no pueden existir varios elementos con el mismo identificador. Para eso se usan las clases.

Para arreglar, podrías, o necesitas, meter otro elemento que haga de fila.

Código HTML:

<div id="contenido">
  <div class="fila">
    <div class="izquierda"></div>
    <div class="derecha"></div>
  </div>
  <div class="fila">
    <div class="izquierda"></div>
    <div class="derecha"></div>
  </div>
</div>
 

Y lo especificas:

Código CSS:

div.fila {
  display: table-row;
}