[SOLUCIONADO] Problema para centrar un DIV

kervinojeda · #1 (**permalink**) 07/08/2013, 09:56

Hola, se que quizas esta duda ya esté aclarada, pero he buscado y buscado y no le encuentro solucion, espero puedan ayudarme, les explico, tengo una pagina de fondo gris en el cual tengo un div de 900px de ancho (blanco) que a su vez tiene otros dos div adentro de 20 px de ancho, uno a la izquierda y otro a la derecha (naranjas), yo lo que quiero es centrar este div en mi pagina pero para que se vea centrado sin importar el tamaño de la pantalla en la que sea abierta la pagina, porque jugando con los px del margen izquierdo he conseguido centrarlo, pero no es lo que quiero porque no se si al abrirlo en una pantalla mas grande o pequeña, no se vea centrado. Ya he probado con margin:0 auto; y no me funciona (He visto videos donde esto funciona, pero a mi no me ha funcionado). QUE HAGO??.

les muestro

HTML:

Cita:

CSS

Cita:

body{
margin:0px;
background-color:#CCC;
}

#blanco
{
background:white;
width:800px;
height:100%;
position:absolute;
}

.izquierda
{
background:orange;
width:20px;
height:100%;
float:left;
position:absolute;
}

.derecha
{
background:orange;
width:20px;
height:100%;
float:right;
position:relative;
}

#2 (**permalink**) 07/08/2013, 10:04

Me parece que tienes que poner posicion relativa para flotarlo..

kervinojeda · #3 (**permalink**) 07/08/2013, 10:13

Cita:

Iniciado por darkhack3r22

Me parece que tienes que poner posicion relativa para flotarlo..

Hice eso y lo que hace es desaparecer todo. ( no se porque).

#4 (**permalink**) 07/08/2013, 10:28

La posicion tienes que definirla lo primero:

Código CSS:

Ver original<style>
body{
background-color: #CCC; 
}
 
#blanco{ 
position: absolute;
background: white;
width: 800px; 
height: 100%; 
}
 
.izquierda { 
position: absolute;
background: orange; 
width: 20px; 
height: 100%; 
float: left; 
}
 
.derecha { 
position: relative;
background: orange; 
width: 20px;
height: 100%;
float: right; 
</style>

pzin · #5 (**permalink**) 07/08/2013, 10:44

¿Para qué quieres esos dos div ahí? Si es sólo como elementos decorativos, podrías ponerlos como bordes:

Código CSS:

Ver original#blanco {
  width: 800px;
  margin: 0 auto;
  border: 20px solid orange;
  border-top: 0;
  border-bottom: 0;
}

No puedes poner posiciones absolutas y luego flotar los elementos, no tiene mucho sentido.

kervinojeda · #6 (**permalink**) 07/08/2013, 11:11

Cita:

Iniciado por pzin

¿Para qué quieres esos dos div ahí? Si es sólo como elementos decorativos, podrías ponerlos como bordes:

No puedes poner posiciones absolutas y luego flotar los elementos, no tiene mucho sentido.

Gracias por lo de los div naranjas, pensándolo bien no tenían sentido en realidad

, el div se me centro, Gracias. Pero eso me generó otro problema, y es el height. al darle la altura de 100%, no me lo muestra, pero si se la doy en px, si, porque? que hago?.

#7 (**permalink**) 07/08/2013, 12:13

Cita:

Iniciado por kervinojeda

Gracias por lo de los div naranjas, pensándolo bien no tenían sentido en realidad

, el div se me centro, Gracias. Pero eso me generó otro problema, y es el height. al darle la altura de 100%, no me lo muestra, pero si se la doy en px, si, porque? que hago?.

Al estar en posicion absoluta el 100% no se reconoce, porque no toma referencia a nadie...

kervinojeda · #8 (**permalink**) 07/08/2013, 12:26

Cita:

Iniciado por darkhack3r22

Al estar en posicion absoluta el 100% no se reconoce, porque no toma referencia a nadie...

Pero es que no lo tengo en posición absoluta, cuando le pongo la posición absoluta, me muestra el alto al 100% pero alineado a la izquierda, y si se la quito, me muestra el div centrado, pero sin la altura al al 100%.

Código:

body{
	
	margin:0px;
	background-color:#CCC;
}

#blanco {
	
	background-color:#FFF;
   	width: 800px;
	height:100%;
	margin: 0 auto;
	border: 20px solid orange;
	border-top: 0;
	border-bottom: 0;
}

Así como esta el CSS, no me muestra la altura al 100%, tengo que ponérsela en px para que me funcione, y lo que quiero es todo el alto de la pantalla.

Aeon1 · #9 (**permalink**) 07/08/2013, 12:38

para centrar un div al centro sin importar la pantalla con css

Código CSS:

Ver originaldiv{width:900px;height:20px; position:relative;margin-left:-5px 0 0 -450px;left:50%;top:50%;}

el margin tiene que ser - la mitad de tu div ya sea el width si es centrado a lo largo o height si es a lo alto de la pantalla dandole left o top al 50% dependiendo lo que ocupes

ArturoGallegos · #10 (**permalink**) 07/08/2013, 12:50

@Aeon1 esa tecnica de centrado es una mala practica en muchos casos aparte de que puede acarrear mas problemas de los que soluciona.

en cuanto al problema de que no toma el 100% de la altura es porque el elemento padre no tiene una altura definida en este caso el body, prueba con

Código CSS:

Ver originalhtml,body{margin:0;padding:0;height:100%;}
body{
    background-color:#CCC;
}
 
#blanco {
    background-color:#FFF;
       width: 800px;
    min-height:100%;
    margin: 0 auto;
    border: 20px solid orange;
    border-top: 0;
    border-bottom: 0;
}

kervinojeda · #11 (**permalink**) 07/08/2013, 15:14

Cita:

en cuanto al problema de que no toma el 100% de la altura es porque el elemento padre no tiene una altura definida en este caso el body, prueba con

No amigo, aun no me funciona, ya no se que hacer.

pzin · #12 (**permalink**) 07/08/2013, 15:17

Código CSS:

Ver originalhtml, body {
  height: 100%;
}

kervinojeda · #13 (**permalink**) 07/08/2013, 15:46

Cita:

Iniciado por pzin

Código CSS:

Ver originalhtml, body {
  height: 100%;
}

Gracias, mi fallo fué no darle el 100% al html también. me funciono perfecto.

fegm_4 · #14 (**permalink**) 07/08/2013, 17:45

Yo tuve el mismo problema pero no me muestra toda la parte blanca sino hasta la mitad =(