Problemas con divs

HR_power · #1 (**permalink**) 09/01/2012, 20:22

Saludos! mi problema es el siguiente: en html cree la estructura basica de una pagina web y cree un div contenedor, dentro de este hay dos div el problema es que yo quiero que sean paralelos y que tengan margen con respecto al contenedor.. pero he probado ya de todo lo que se (no es mucho) y pues queda asi: salen los dos contenedores pero una queda debajo del otro y no puedo hacerlos paralelos y vale mencionar que ni con margin ni padding tampoco he logrado que tengan margen con respecto al contenedor.. que hice mal?

ZoroRoronoa · #2 (**permalink**) 09/01/2012, 21:31

1.- muestra tu codigo
2.- muestra un "preview" de como quieres que se mire.
3.- muestra un "preview" de COMO QUEDA tu resultado (el error)

Saludos.

alfcm · #3 (**permalink**) 09/01/2012, 21:36

HOLA PARA ESO TIENES Q APLICAR DIVS FLOTANTES, TE DOY UN EJEMPLO

Código HTML:

Ver original<html>
<body>
<div id="contenedor" style="width:800px">
<div id="lado1" style="float:left;width:350px;border:1px solid red">LADO 1</div>
<div id="lado2" style="float:left;width:350px;border:1px solid blue">LADO 2</div>
</div>
</body>
</html>

ESPERO PUEDA AYUDARTE

SAUDOS

HR_power · #4 (**permalink**) 10/01/2012, 10:11

Este es es el problema exactamente! los contenedores de arriba y de abajo son el header y el footer respectivamente, el cuadro gris que aparece centrado es el contenedor. El problema es con el div celeste y el rojo!! si se fijan cuando intento alenear el rojo ala derecha se coloca ala derecha pero abajo! e interfiere con el footer de paso! que hice mal? podrian ayudarme? Posteare el codigo para que lo vean

HR_power · #5 (**permalink**) 10/01/2012, 10:13

Este es el HTML

<html>

<head>
<LINK REL=StyleSheet HREF="prueba.css" TYPE="text/css" MEDIA=screen>
</head>

<body>
<div class="cabecera"> </div>
<div class="contenedor">

<div class="principal"></div>
<div class="lateral"></div>
</div>
<div class="pie"></div>
</body>

</html>

Este es el CSS

body {
margin: 0;}

.cabecera {
width: 100%;
background-color: #333F53;
height: 150px;
margin:0px;
padding:0px;
}

.contenedor {
width: 960px;
height: 300px;
margin: 0 auto;
background-color: #A1ADC1;}

.principal {
width: 680px;
height: 200px;
background-color: #CADAF4;
}

.lateral {
float: right;
width: 280px;
height: 400px;
background-color: #F61E49;
}

.pie {
width: 100%;
background-color: #223D68;
height: 200px;
margin: 0px;
padding: 0px;}

El principal es el cuadro celeste y el lateral es el rojo!

djemili · #6 (**permalink**) 10/01/2012, 11:02

prueba a añadir un "clear: both;" en el pie. Aunque no soy muy experto..

djemili · #7 (**permalink**) 10/01/2012, 11:04

Y en el lateral tienes que añadir "float: left;"

HR_power · #8 (**permalink**) 10/01/2012, 14:11

Amigo! gracias!! me sirvio lo del pie!! pero todavia no consigo que el cuadro rojo (div) sea paralelo al celeste, siempre queda abajo! pero gracias x la respuesta funciono

C2am · #9 (**permalink**) 10/01/2012, 15:59

Agrega un reset al css:
Algo muy básico:

Código CSS:

Ver original*{margin:0,
padding:0;}

Y si con eso no se soluciona prueba a disminuir un poco el ancho de uno de los dos.
Saludos

HR_power · #10 (**permalink**) 10/01/2012, 17:39

Gracias por la respuesta amigo! probe y nada, pero probando llegue a una "solucion" coloque un float: left; al Div que llame principal (el celeste) y listo!

C2am · #11 (**permalink**) 10/01/2012, 17:51

Vi el float right en el otro por eso no te dije del float.
Pero ahora me doy cuenta que para que te funcione tal como lo tenias con anterioridad a este último cambio es necesario que en el html la lateral aparezca antes que la principal así:

Código HTML:

Ver original<html>
 
<head>
<LINK REL=StyleSheet HREF="prueba.css" TYPE="text/css" MEDIA=screen>
</head>
 
<body>
<div class="cabecera"> </div>
<div class="contenedor">
 
<div class="lateral"></div> <!-- Primero la flotada a la derecha -->
<div class="principal"></div> <!-- luego la no flotada -->
 
</div>
<div class="pie"></div>
</body>
 
</html>

Saludos y prueba ya que estas esta opción, para que vea como trabaja el flotado.

HR_power · #12 (**permalink**) 10/01/2012, 18:07

Cita:

Iniciado por C2am

Vi el float right en el otro por eso no te dije del float.
Pero ahora me doy cuenta que para que te funcione tal como lo tenias con anterioridad a este último cambio es necesario que en el html la lateral aparezca antes que la principal así:

Código HTML:

Ver original<html>
 
<head>
<LINK REL=StyleSheet HREF="prueba.css" TYPE="text/css" MEDIA=screen>
</head>
 
<body>
<div class="cabecera"> </div>
<div class="contenedor">
 
<div class="lateral"></div> <!-- Primero la flotada a la derecha -->
<div class="principal"></div> <!-- luego la no flotada -->
 
</div>
<div class="pie"></div>
</body>
 
</html>

Saludos y prueba ya que estas esta opción, para que vea como trabaja el flotado.

Oye muchas gracias amigo! no tenia idea que la posicion de los div dentro del contenedor en el html jugaba un papel importante ya que igual los dos esrtaban dentro de un contenedor.. gracias xq si funciono sin tener que poner float a ambos! de las dos maneras funciona bien! EL UNICO PROBLEMA QUE TENGO AHORA ES QUE CUANDO EL HEIGHT DE LOS DOS DIVS AUMENTA EL DIV CONTENEDOR NO SE AJUSTA AUTOMATICAMENTE AL TAMAÑO. SALGO DE UNO Y ME METO EN OTRO XD

C2am · #13 (**permalink**) 10/01/2012, 18:10

Al contenedor aplica:

Código CSS:

Ver originaloverflow: hidden; o auto;

Con esto se "limpian los float"

http://www.librosweb.es/css/capitulo...nto_float.html
http://www.librosweb.es/css_avanzado...ar_floats.html

Saludos

HR_power · #14 (**permalink**) 10/01/2012, 18:36

Cita:

Iniciado por C2am

Al contenedor aplica:

Código CSS:

Ver originaloverflow: hidden; o auto;

Con esto se "limpian los float"

[url]http://www.librosweb.es/css/capitulo5/posicionamiento_float.html[/url]
[url]http://www.librosweb.es/css_avanzado/capitulo1/limpiar_floats.html[/url]

Saludos

Seeeeeee esa pagina de librosweb.es es muy buena! buenisima pero aun no he llegado a esos capitulos xq primero empeze con el libro introduccion a XHTML que ya lo termine =D lo de Auto; ya lo probe y nada.. hidden que no es para ocultar contenido que sobrepasa el tamaño del div?

C2am · #15 (**permalink**) 10/01/2012, 18:47

"El valor hidden se utiliza cuando no se puede controlar la cantidad de contenidos que se van a incluir dentro de un elemento pero al mismo tiempo se quiere controlar de forma precisa el tamaño de cada elemento de la página."

SI no tienes definido el alto, este será auto, por lo que el overflow realmente no ocultara nada y mostrará todo el contenido.
http://www.librosweb.es/referencia/css/overflow.html

Ahora el por qué funciona en cuanto al float, no tengo la más pálida idea, pero funciona.

HR_power · #16 (**permalink**) 10/01/2012, 19:14

Cita:

Iniciado por C2am

"El valor hidden se utiliza cuando no se puede controlar la cantidad de contenidos que se van a incluir dentro de un elemento pero al mismo tiempo se quiere controlar de forma precisa el tamaño de cada elemento de la página."

SI no tienes definido el alto, este será auto, por lo que el overflow realmente no ocultara nada y mostrará todo el contenido.
[url]http://www.librosweb.es/referencia/css/overflow.html[/url]

Ahora el por qué funciona en cuanto al float, no tengo la más pálida idea, pero funciona.

Que rayos

no se porque no funciona, se sale del contenedor el cuadro principal, no se estira el contenedor, pero cuando asigno un valor por ejemplo 700px al contenedor si crece pero cuando el contenido de el crece no pasa nada, que raro, sera que el div cabecera y el pie los deje fuera del contenedor? no creo

C2am · #17 (**permalink**) 10/01/2012, 19:26

Muestra todo el código que estas usando o si tienes un enlace mejor.
Saludos

También puedes probar tu código en: http://jsfiddle.net/

HR_power · #18 (**permalink**) 10/01/2012, 20:05

Cita:

Iniciado por C2am

Muestra todo el código que estas usando o si tienes un enlace mejor.
Saludos

También puedes probar tu código en: [url]http://jsfiddle.net/[/url]

El HTML

<html>

<head>
<LINK REL=StyleSheet HREF="prueba.css" TYPE="text/css" MEDIA=screen>
</head>

<body>
<div class="cabecera"> </div>
<div class="contenedor">

<div class="principal"></div>
<div class="lateral"></div>
</div>
<div class="pie"></div>
</body>

</html>

El CSS

body {
margin: 0;}

.cabecera {
width: 100%;
background-color: #333F53;
height: 150px;
margin:0px;
padding:0px;
}

.contenedor {
width: 960px;
height: 300px;
margin: 0 auto;
background-color: #A1ADC1;
}

.principal {
float: left;
width: 680px;
height: 200px;
background-color: #CADAF4;

}

.lateral {
float: right;
width: 280px;
height: 200px;
background-color: #F61E49;

}

.pie {
width: 100%;
background-color: #223D68;
height: 200px;
margin: 0px;
padding: 0px;
clear: both;}

C2am · #19 (**permalink**) 10/01/2012, 21:30

NO sé si es lo que buscas, tu dirás:
http://jsfiddle.net/c2am/wyACY/5/
A los width los puse en porcentaje para que se vea en el ejemplo, pero puede ser en px tal como lo tenías. No tiene altura, si las necesitas tendrás que controlar que el contenido no lo supere o usar overflow:hidden en "principal" también (además de en el contenedor)

Saludos

HR_power · #20 (**permalink**) 10/01/2012, 22:09

Cita:

Iniciado por C2am

NO sé si es lo que buscas, tu dirás:
[url]http://jsfiddle.net/c2am/wyACY/5/[/url]
A los width los puse en porcentaje para que se vea en el ejemplo, pero puede ser en px tal como lo tenías. No tiene altura, si las necesitas tendrás que controlar que el contenido no lo supere o usar overflow:hidden en "principal" también (además de en el contenedor)

Saludos

Muchas gracias amigo C2am tus consejos si me han ayudado bastante gracias por tomarte el tiempo de contestar te estoy agradecido! en algo que necesites y puedo ayudar ya sabes.. menos CSS que estoy aprendiendo xDD

HR_power · #21 (**permalink**) 11/01/2012, 11:17

Para todos aquellos que tengan el mismo problema, quiero darles la solucion!! probando y probando la encontre y la comparto para todo aquel que busque la misma respuesta y no la encuentre! La solucion es que cree un Div contenedor al contenedor! y le di width: 100%

Aca el codigo para mayor comprencion!

<html>

<head>
<LINK REL=StyleSheet HREF="prueba2.css" TYPE="text/css" MEDIA=screen>
</head>

<body>
<div id="contenedor">
<div class="cabecera"> </div>
<div class="contenedor2">

<div class="contenido"></div>
<div class="lateral"></div>
</div>
<div class="pie"></div>
</div>
</body>

</html>