Panel lateral fusiona los elementos

[IDRID]

Hola tengo un problema, cuando se abre el panel lateral, los posts y la sidebar se fusionan, me parece que tiene que ver con position absolute y relative.



http://idridplanet.blogspot.com/

[cristian_cena]

hola idrid, urgente pone todo dentro de un contenedor ;)

Código codigo:

<div id="contenedor">...contenido...</div>
#contenedor{width:...; margin:0 auto;}
 

Saludos.

[IDRID]

Iniciado por cristian_cena

hola idrid, urgente pone todo dentro de un contenedor ;)

Código codigo:

<div id="contenedor">...contenido...</div>
#contenedor{width:...; margin:0 auto;}
 

Saludos.

Lo primero gracias xDD! , los el div de los posts tiene un margen a la izquierda y el de la sidebar a la derecha, como lo adapto?

[cristian_cena]

a mi no me gusta que el diseño se flote hacia los costados, porque lo ves bien para la resolucion en que estas diseñando pero luego lo ves con otra resolución y te queres matar.

Pero si queres hacerlo así de todos modos podes darle float:left; al contenido de la izquierda y float:right; al contenido de la derecha. Para que funcione correctamente aplícale tambien al padre de las columnas flotadas overflow:hidden; (esto hará que el padre crezca en alto automáticamente según la altura de sus hijos flotados ;) )

Otra opción para hacer lo mismo pero sin usar float sería la siguiente:

das position:relative al padre contenedor (no te olvides de esto por favor, se buena persona).
y das position absolute a las cajas interiores

luego a las que quieres que tomen 'margen' izquierdo le das top:..; y left:...; (vale px, %, em, etc)
y a las que quieres que tomen distancia desde el borde derecho le das top:..; y right:...;

Por ultimo, yo no lo haría de ninguna de estas dos formas porque no me gusta, mas bien lo haría así:

<div id="contenedor">
<div class="columnas" id="columna_left">...contenido...</div>
<div class="columnas" id="columna_right">...contenido...</div>
</div>

#contenedor{width:...; overflow:hidden; margin:0 auto;}
.columnas{width:...; float:left;} /*aca flotamos las dos a la izquierda y damos el ancho justo para que entre justo en el ancho del contenedor*/
#columna_left{lo usas si quieres darle estilos especificos}
#columna_right{lo usas si quieres darle estilos especificos}

El ancho total de una caja css esta dado por la suma de margin+padding+width+border

Saludos

[IDRID]

Iniciado por cristian_cena

a mi no me gusta que el diseño se flote hacia los costados, porque lo ves bien para la resolucion en que estas diseñando pero luego lo ves con otra resolución y te queres matar.

Pero si queres hacerlo así de todos modos podes darle float:left; al contenido de la izquierda y float:right; al contenido de la derecha. Para que funcione correctamente aplícale tambien al padre de las columnas flotadas overflow:hidden; (esto hará que el padre crezca en alto automáticamente según la altura de sus hijos flotados ;) )

Otra opción para hacer lo mismo pero sin usar float sería la siguiente:

das position:relative al padre contenedor (no te olvides de esto por favor, se buena persona).
y das position absolute a las cajas interiores

luego a las que quieres que tomen 'margen' izquierdo le das top:..; y left:...; (vale px, %, em, etc)
y a las que quieres que tomen distancia desde el borde derecho le das top:..; y right:...;

Por ultimo, yo no lo haría de ninguna de estas dos formas porque no me gusta, mas bien lo haría así:

<div id="contenedor">
<div class="columnas" id="columna_left">...contenido...</div>
<div class="columnas" id="columna_right">...contenido...</div>
</div>

#contenedor{width:...; overflow:hidden; margin:0 auto;}
.columnas{width:...; float:left;} /*aca flotamos las dos a la izquierda y damos el ancho justo para que entre justo en el ancho del contenedor*/
#columna_left{lo usas si quieres darle estilos especificos}
#columna_right{lo usas si quieres darle estilos especificos}

El ancho total de una caja css esta dado por la suma de margin+padding+width+border

Saludos

En ese caso hare tu forma, gracias ;)