Problema centrando capas

Finseneu · #1 (**permalink**) 22/11/2009, 13:12

Código:

#contenedor {
    position: relative;
    clear: left;
    width: 100%;
    min-height: 100px;
    margin:0 auto;
    text-align:center;
}

#izquierda {
    float:left;
    width: 375px;
    height: 30px;
    margin:0 auto;
}

#derecha {
    float:right;
    width: 375px;
    height: 30px;
    margin:0 auto;
}

Código:

<div id="contenedor">
    <div id="izquierda">izquierda</div>
    <div id="derecha">derecha</div>
</div>

Amigos, las capas dentro de contenedor no deberían aparecer centradas?
Donde esta el error?

WinderJerter · #2 (**permalink**) 22/11/2009, 14:07

hola que tal, lo que pasa es que en el div id contenedor tienes de ancho el 100%, mejor dicho utiliza toda al pantalla al pantalla, cambia el width a pixeles o a un porcentaje menor y veras como si queda centrado

saludos!!!

Finseneu · #3 (**permalink**) 22/11/2009, 14:33

Imaginaba que era eso, supongo que tendre que crear otro contenedor transparente dentro porque el que ocupa todo el ancho de la pantalla lleva una imágen de fondo.

Gracias.

willyfc · #4 (**permalink**) 22/11/2009, 15:02

si es necesario que tu imagen ocupe todo el fondo en vez de poner un nuevo div podrías asginar el fondo al body en el css:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body{background:#0099FF url(rutaatuimagne);}
#contenedor {
    position: relative;
    clear: left;
    width: 750px;;
    min-height: 100px;
    margin:0 auto;
    text-align:center;
}
 
#izquierda {
    float:left;
    width: 375px;
    height: 30px;
    margin:0 auto;
}
 
#derecha {
    float:right;
    width: 375px;
    height: 30px;
    margin:0 auto;
}
#pie{width:100%; height:20px; background:#CCC; clear:both;}
</style>
</head>
 
<body>
<div id="contenedor">
    <div id="izquierda">izquierda</div>
    <div id="derecha">derecha</div>
    <div id="pie"></div>
</div>
</body>
</html>