Divs no crese con los demas

arkang31 · #1 (**permalink**) 03/02/2009, 09:30

Bueno tengo 3 divicones dentro una llamada sub-contenedorel cual quiero que cresca con relacion a las otras 3 pero al poner

Código:

height:auto;

este no lo ace aqui les dejo todo el codigo y espero que me corrijan

index.html

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>			
<jdoc:include type="head" /> 			
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />			
<body>
<div id="contenedor">
	<div id="sub-contenedor" align="center">
		<div id="izquierda" align="left">
		<jdoc:include type="modules" name="left" style="xhtml" />
		</div>
			<div id="centro">
			<jdoc:include type="component" />
			</div>
		<div id="derecha">
		<jdoc:include type="modules" name="right" style="xhtml" />
		</div>
	</div>
</div>
</body>
</html>

templates.css

Código:

* Body{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 78%;
	color: #FFF;
	list-style:none;
	}
/*=====================================	
			Comienza Menu
=====================================*/
.menu {
	background: #131313;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.menu li {
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}
.menu a {
	background: #131313;
	border-bottom: 1px solid #191919;
	color: #ccc;
	display: block;
	margin: 0;
	padding: 8px 12px;
	text-decoration: none;
	font-weight:normal;
}
.menu a:hover {
	background: #80a300 url("images/hover.gif") left center no-repeat;
	color: #fff;
	padding-bottom: 8px;
}
/*=====================================	
			Termina Menu
=====================================*/
#contenedor {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:1550px;
	z-index:1;
	background-color: #80a300;
}
#sub-contenedor {
	position:relative;
	top:150px;
	width:90%;
	height:auto;
	z-index:1;
	background-color: #000000;
}
#izquierda {
	position:absolute;
	left:1%;
	top:1%;
	width:18%;
	height:auto;
	z-index:1;
	background-color: #131313;
    margin: 0px 5px 5px 0px;
    padding: 10px;
}
#centro {
	position:absolute;
	left:22%;
	top:1%;
	width:55%;
	height:auto;
	z-index:1;
	background-color: #131313;
    margin: 0px 5px 5px 0px;
    padding: 10px;
}
#derecha {
	position:absolute;
	top:1%;
	width:17%;
	height:auto;
	z-index:1;
	background-color: #131313;
	right: 1%;
	margin: 0px 5px 5px 0px;
    padding: 10px;
}

cual es mi error espero sus respuestas ^^

emiliodeg · #2 (**permalink**) 03/02/2009, 11:08

la solucion mas facil es poner un fondo q se repita horizontal mente en el contenedor q tiene los 3 bloques, o sino corregirlo con javascript
por css solito no se puede

locoxchacho · #3 (**permalink**) 03/02/2009, 11:17

yo probaria con #sub-contenedor {
overflow:auto} y ver si crece.

Sino, la otra solucion que te dieron

Saludos

talmente · #4 (**permalink**) 03/02/2009, 11:40

La solución a tu problema: tres columnas que crezcan igual indepedientemete del contenido que alberguen cada una.

http://matthewjamestaylor.com/blog/e...r-css-no-hacks

O en araudi.net

puro css