Eternas capas: Problema con HEIGHT

sancroce · #1 (**permalink**) 28/07/2010, 07:55

Interminable problema de capas con CSS. como veran a continuacion este sitio esta armado en capas.

Mi problema es que cuando la variable $titulo supera el alto minimo (min-height) el texto se queda sin el fondo de la capa que lo contiene. En este caso la capa BOTHSIDE que esta contenida por la capa LEFTSIDE que a su vez esta contenida por la capa PRINCIPAL.

Probe de ponerle tanto a la LEFTSIDE como a la capa BOTHSIDE como a la capa PRINCIAPAL distintos casos de HEIGHT.... Height: 100%/1100px/auto. Pero no tengo resultados.

Tambien probre el Overflow, pero tampoco...

POR FAVOR, AYUDAAAAAA!!!!

#header{ position:relative; width:1000px; height: 75px; margin:auto; padding:15px; border:1px solid #CCCCCC;background-color:#FFFFFF; }

#menu{ position:relative; width:1000px; height:25px; margin:auto; padding-left:15px; padding-right:15px; border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC; background-color:#FFFFFF; background-image: url(../img/fondomenu.jpg)}

#principal{ position:relative; width:1000px; min-height: 1100px; height:100%; margin:auto; padding:15px; border:1px solid #CCCCCC;background-color:#FFFFFF}

#leftside{ position:relative; float:left; width:700px; height:100%; z-index:100; margin:auto; }
#izquierda{ position:relative; float:left; width:350px; z-index:100; margin:auto; border-right:1px solid #CCC }
#derecha{ position:relative; float:left; width:340px; z-index:100; margin:auto; }
#bothside{ position:relative; float:left; width:690px; z-index:100; margin:auto }

#rightside{ position:relative; float:left; width:295px; z-index:100; margin:auto; border-left:1px solid #CCCCCC;}

<body>
<div id="header"><?php include("includes/header.inc"); ?></div>
<div id="menu"><?php include("includes/menu.inc"); ?></div>

<div id="principal">
<div id="leftside">
<div id="bothside" align="center">
<table width='95%' height='100%' cellpadding='5px' cellspacing='0'>
<tr>
<td align='left' colspan='2'>
<span class='txttitulo'>$titulo</span>
</td>
<tr>
</table>
</div>
</div>
<div id="rightside"><?php include("includes/rightside.inc"); ?></div>
</div>
</body>
</html>

emal011 · #2 (**permalink**) 29/07/2010, 03:51

en realidad nose cual es problema, ya que no puedo ver el fallo en si. si pusieras la web seria mejor, pero bueno...

si lo que quieres es que el height vaya automaticamnte 100%, intenta esto:

height: 100%;
height: auto !important;
min-height: ***px;/*este es adicional, por si tienes un minimo en pixeles*/

sancroce · #3 (**permalink**) 01/08/2010, 08:39

He probado ambas cosas con los Height, y nada...

Aca dejo todo el codigo de la pagina. Con un copy+paste

AGREGA MAS "bla bla" y veras como la capa comienza a irse de las otras

Muchas gracias

<!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=utf-8" />
<title>test</title>

<style>
#header{ position:relative; width:1000px; height: 75px; margin:auto; padding:15px; border:1px solid #CCCCCC;background-color:#FFFFFF; }
#menu{ position:relative; width:1000px; height:25px; margin:auto; padding-left:15px; padding-right:15px; border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC; background-color:#FFFFFF; background-image: url(../img/fondomenu.jpg)}

#principal{ position:relative; width:1000px; min-height: 1100px; height:100%; height:auto; margin:auto; padding:15px; border:1px solid #CCCCCC;background-color:#DDDDDD}
#leftside{ position:relative; float:left; width:700px; height:100%; margin:auto; background-color: #990000}
#bothside{ position:relative; width:90%; height:100%; margin:auto; background-color:#777777 }
#rightside{ position:relative; float:right; width:295px; height:100%; margin:auto; border-left:1px solid; background-color:#ffffff }

</style>
</head>

<body>
<div id="header">ESTO ES EL HEADER</div>
<div id="menu">ESTO ES EL MENU</div>
<div id="principal"> capa principal<br />

<div id="leftside">
<div id="bothside" align="center">
ESTA ES LA CAPA "bothside"<br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla

</div>
</div>
<div id="rightside">ESTE ES EL LADO DERECHO</div>
</div>

</body>
</html>

sancroce · #4 (**permalink**) 01/08/2010, 08:52

Bien:

Lo solucione poniendo un display: inline-block a la capa principal.

El problema ahora es que me queda todo alineado a la izquierda. Pierde la alineacion al centro.

jomaruro · #5 (**permalink**) 01/08/2010, 08:52

Hola:

He probado tu código y no veo nada raro. Si duplico los bla bla, el contenedor crece. ¿Cuál es el problema? ¿Qué es lo que quieres hacer?

Saludos.

sancroce · #6 (**permalink**) 01/08/2010, 09:06

si agregas muchos bla bla's... pero muchos, veras como la capa ROJA Y GRIS SE SALEN DE LA CAPA PRINCIPAL...

sancroce · #7 (**permalink**) 01/08/2010, 09:10

Aqui te dejo las 2 opciones:

http://www.santiagoamy.com/test.html

http://www.santiagoamy.com/test2.html

jomaruro · #8 (**permalink**) 01/08/2010, 10:40

Hola:

Añádele al div #principal overflow: auto;

Saludos.

sancroce · #9 (**permalink**) 01/08/2010, 11:16

Pucha.... MUCHISIMAS GRACIAS...