Ver Mensaje Individual
  #7 (permalink)  
Antiguo 31/01/2011, 21:22
Avatar de granbosteron
granbosteron
 
Fecha de Ingreso: agosto-2004
Mensajes: 164
Antigüedad: 19 años, 8 meses
Puntos: 1
Respuesta: Centrar Div sin saber el ancho "width"

Cita:
Iniciado por kseso? Ver Mensaje
Por definición un divisor (div) es un elemento de bloque que si no se limita su tamaño ocupará todo el espacio (en horizontal) que tenga disponible. Así que ya queda centrado, pero ocupando la totalidad.
Sin más información sobre qué necesita, no se puede ofrecer una solución ad doc.

Pero respecto a su pregunta si es posible centrar un div sin conocer a priori su anchura sí es posible.
Sólo tiene que limitarla, como le decía en un principio. Y se me ocurre que:
.- Puede usar un max-width (y sus equivalentes para ie) y aplicarle el margin: 0 auto.
:- Otra forma de limitar su anchura sin referirse a ella es que aplique un margen lateral:
Código CSS:
Ver original
  1. #contenedor {margin: 0 10%;/*10 por ciento*/}
por ejemplo.

Pero en ambos casos está afectando a su tamaño, ya sea de forma directa o indirecta.
Por cierto, hay veces que en vez de centrar el contenedor se puede optar por centrar sus contenidos,

Gracias Kseso.
Necesito que funcione esto:

Código HTML:
<style type="text/css">
html,body {
	margin:0;
	padding:0;
	height:100%;
}


.mother {
	position:relative; /* needed for footer positioning*/
	margin:0 auto 0 auto; /* center, not in IE5 */
	width:100%;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
}


.mother-header {
	background:#990;
	width:1000px;
	margin:0 auto;
	height:180px;
}


.mother-content {
	background: #09C;
	width:1000px;
	margin:0 auto;
	padding:0 0 400px 0; /* bottom padding for footer */
}


.mother-footer {
	position:absolute;
	background: #999; 
	width:100%;
	bottom:0; /* stick to bottom */
	height:400px;
}




.nav-princ { margin:0 auto;}
.nav-princ .r{ background: #ff0000; width:22px; height:57px; float:left;}
.nav-princ .l{ background: #ff0000; width:22px; height:57px; float:left;}
.nav-princ .links{ background: #ffffff;  height:57px; float:left;}
</style>
</head>
<body>
<div class="mother">
    <div class="mother-header">header</div>
    <div class="mother-content">

                <div class="nav-princ">
                    <div class="l"></div>
                    <div class="links">
                        <a href="#">Automóviles</a>
                        <a href="#">Automóviles</a>
                        <a href="#">Automóviles</a>
                     </div>
                     <div class="r"></div>
                 </div>
                 
      </div>
      <div class="mother-footer">footer</div>
</div>
</body>
</html> 
Necesito que "nav-princ" haga crecer la caja que lo contiene deacuerdo a la cantidad de links que tenga en su interior, o sea sin darle medida de ancho a los divs que lo contienen.

Simplifique mi codigo para que entiendan lo que necesito. Quizas alguno dira, para que lo necesito, pero bueno necesito que funcione de esa manera y si es posible de forma standard para ie y firefox. En firefox funciona con display:table; pero no es compatible con ie7 o inferior.

gracias de nuevo
__________________
Saludos :adios: :adios: :adios: