¡El "padding" me ignora!

unusuariosecreto · #1 (**permalink**) 17/08/2009, 07:48

¡¡Hola!!

Tengo un diseño de una web a dos columnas tal que así:

Código HTML:

#izquierda
{
 float:left;
 width:200px;
}

#derecha
{ 
 padding-left:10px;
}

Mi problema es que la columna derecha no respeta la propiedad "padding" y siempre se queda el contenido pegado a la parte izquierda de ese div.

¿¿Qué estoy haciendo mal??

¡Muchas gracias!

abimaelrc · #2 (**permalink**) 17/08/2009, 07:52

En vez de padding prueba con margin

unusuariosecreto · #3 (**permalink**) 17/08/2009, 07:54

He probado con los dos... y no hay manera... no lo entiendo...en cualquier caso... no quiero que los div se separen...

GRacias!

abimaelrc · #4 (**permalink**) 17/08/2009, 08:01

Tendrias que colocar mas codigo o un link para poder visualizar la pagina entonces y ver el codigo fuente

unusuariosecreto · #5 (**permalink**) 17/08/2009, 08:12

Mira este es mi CSS:
#contenedor
{
margin-left: 330px;
margin-right: 330px;
background-color:red;
}

#izquierda
{
float:left;
width:230px;
background-color:orange;
border-right: 2px solid #ffffff;
}

#derecha
{
padding-left:6px;
background-color:purple;
}

Aquí tengo una imagen la de web: http://img31.imageshack.us/img31/1598/dibujoydc.jpg

Mi objetivo es que las imágenes de la columna derecha tengan un padding y no queden tan pegadas a ese borde blanco chiquitito (que pertenece a la columna de la izquierda)

¡Mcuhas gracias por tu ayuda!

abimaelrc · #6 (**permalink**) 17/08/2009, 08:21

Una cosa más podrias escribir el html tambien

unusuariosecreto · #7 (**permalink**) 17/08/2009, 08:24

Por supuesto!

<body>
<div id="contenedor">

<div id="menu"></div>

<div id="imagen_principal">
<p align="center"><img src="images/titulo.jpg"> </p>
</div>

<div id="izquierda">
<div id="item_izquierda">
<img src="images/cara.jpg">
</div>

<div id="izquierda_vacio"></div>
<div id="izquierda_vacio"></div>
<div id="izquierda_vacio"></div>
<div id="izquierda_vacio"></div>
<div id="izquierda_vacio"></div>

</div>

<div id="derecha">

<div id="item_derecha">
<img src="images/web.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor

incidunt ut labore et dolore magna aliqua.
</div>

<div id="item_derecha">
<img src="images/photos.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor

incidunt ut labore et dolore magna aliqua.
</div>

</div>

<div id="clear" style="clear:both">

</div>

</body>

abigor66 · #8 (**permalink**) 17/08/2009, 08:51

Hola Usuario desconocido, prueba no utilizar id para anclar el css y mejor utiliza un class.

Suerte.

abimaelrc · #9 (**permalink**) 17/08/2009, 09:17

Copialo y pegalo a un html nuevo y verifica lo que hice

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
*{margin: 0; padding: 0; border: 0; position:relative:}
html, body{background-color: #fff;}
 
#contenedor{
    width: 700px;
    margin: 0 auto;
}
 
#izquierda{
    float:left;
    /*Le restas los 2px del borde*/
    width: 198px;
    background-color:orange;
}
 
#derecha{
    float: right;
    width: 490px;
    background-color:purple;
}
</style>
</head>
<body>
<div id="contenedor">
    <div id="derecha">
        <br /><br /><br />
        derecha
    </div>
    <div id="izquierda">
        izquerda
        <br /><br /><br /><br />
    </div>
    <div id="clear" style="clear:both"></div>
</div>
 
</body>
</html>

Para que funcione la centralización necesitas dejar el doctype y el margin: 0 auto;

unusuariosecreto · #10 (**permalink**) 17/08/2009, 11:53

¡Hola!

He probado tu código y he cambiado el contenedor de esto:

Código:

#contenedor
{
 margin-left: 330px;
 margin-right: 330px;
}

a esto:

Código:

#contenedor
{
 width:600px;
 margin:0 auto;
}

y los div "izquierda" y "derecha" les he puesto la propiedad "float:left" y "float:right" respectivamente...

Me funciona a la perfección, ¡MUCHAS GRACIAS! me has ahorrado un infarto cerebral.. xD xD

Lo que me queda ahora... es entenderlo...

No se que diferencia hay en decir al contendor un "margin:auto" a como lo tenia yo, que le daba una cantidad... y e que puede afectar al padding que yo comentaba...

Y por otro lado... El float:right para la columna de la derecha, nunca lo he usado porque al de la izquierda siempre le decía float:left... ¿debe de hacerse así?

¡De nuevo muchas gracias por la ayuda!

abimaelrc · #11 (**permalink**) 17/08/2009, 12:01

Ya estabas parece que apunto de una combulción con tanta emoción

El margin: 0 auto con logicamente declarando el doctype arriba en el html logra que se centralice la paginaweb.

Para lo segundo declarar el float: right yo siempre lo he hecho. No sé, si no se deba (creo que debes declararlo para evitar errores, algún experto en el tema te indicara que es lo que se debe hacer). Pero mientras tanto verifica en internet si hay alguna información que te diga lo que debes hacer. Si encuentras algo lo escribes aqui para tambien aprender

. Bueno me dejas saber.

PD: Tambien se me olvido quitar lo de /*Le restas los 2px del borde*/ Es que tu codigo tenia un borde a la derecha de 2px y yo lo habia dejado pero al modificar quite la parte que tu hiciste y se me olvido aumentar los 2px al width y quitar el comentario