Problemas con capas

dacusa · #1 (**permalink**) 06/08/2012, 10:09

Hola a todos haber si me podeis echar una mano con unas capas que llevo dos dias dandole vueltas y seguro que es una tonteria.
Primero os dejo los codigos:
Codigo Html:

Código:

<html>
<head>
<title>Documento sin título</title>
<LINK href="css/estilo.css" type="text/css" rel="stylesheet">
</head>
<body background="Imagenes/Fondo.jpg">

<div id="pagina">

	<div id="pagina1">

			<div id="cabecera"></div>
    		<div id="anuncios"></div>
     		<div id="marcosuperior"></div>
 	</div>
    
 	<div id="pagina2">
 			<div id="pagina2a">
   
    				<div id="marcoizquierdo"></div>
    
    				<div id="contenedor">
    				  <p>hola</p>
    				  <p>hola</p>
    				  <p>hola</p>
    				</div>
    
    				<div id="margencentralizquierdo"></div>
    		</div>
    
    		<div id="pagina2b">
    				<div id="margencentralderecho"></div>
    				<div id="menu"></div>
    				<div id="margenderecho"></div>
    				<div id="inferiormenu"></div>
    				<div id="cuerda1"></div>
    		</div>
	</div>

    <div id="pagina3">
    
    		<div id="pie"></div>
    		<div id="inferiorizquierda"></div>
    		<div id="inferiorcentro"></div>   
    		<div id="cuerda"></div>
    		<div id="inferiorderecha"></div>
	</div>
</div>




</body>
</html>

Y el codigo css:

Código:

 #pagina
 {width:835px;
 position:absolute;
 left:50%;
 margin-left:-400px;}
 
  #pagina1
 {width:835px;
 float:left;
}
 
  #pagina2
 {width:835px;
 float:left;
}/*altura de la pagina*/
 
   #pagina2a
 {width:618px;
 float:left;
 height:1000px;}
 
   #pagina2b
 {width:217px;
 float:left;
 height:1000px;}/*altura del menu*/
 
   #pagina3
 {width:835px;
 float:left;
}
 
  #cabecera
 {width:835px;
 height:172px;
 background:url(../Imagenes/cabecera.gif);}
 
 #anuncios
 {width:835px;
 height:91px;
 float:left;
 background:url(../Imagenes/anuncios.gif);}
 
  #marcosuperior
 {width:835px;
 height:91px;
 float:left;
 background:url(../Imagenes/marco-superior.gif);}
 
   #marcoizquierdo
 {width:98px;
 height:100%;
 /*height:579px;*/
 float:left;
 background:url(../Imagenes/marco-izquierdo.gif);}
 
    #contenedor
 {width:461px;
 height:100%;
 float:left;
 background:#fefecd;}
 

     #margencentralizquierdo
 {width:59px;
 height:100%;
 float:left;
 background:url(../Imagenes/marco-central-izquierdo.gif);}
 
      #margencentralderecho
 {width:52px;
 height:100%;
 float:left;
 background:url(../Imagenes/marco-central-derecho.gif);}
 
       #menu
 {width:111px;
 height:100%;
 float:left;
 background:url(../Imagenes/fondo-menu.gif);}
 
       #margenderecho
 {width:54px;
 height:100%;
 float:left;
 background:url(../Imagenes/marco-derecho.gif);}
 
  #inferiorizquierda
 {width:559px;
 height:207px;
 float:left;
 background:url(../Imagenes/inferior-izquierda.gif);}
 
   #inferiorcentro
 {width:59px;
 height:207px;
 float:left;
 background:url(../Imagenes/inferior%20centro.gif);}
 
    #inferiormenu
 {width:217px;
 height:103px;
 float:left;
 background:url(../Imagenes/inferior%20menu.gif);}
 
      #cuerda1
 {width:217px;
 height:100%;
 float:left;
 background:url(../Imagenes/cuerda.gif);}
 
#cuerda
 {width:217px;
 height:116px;
 float:left;
 background:url(../Imagenes/cuerda.gif);}

   #inferiorderecha
 {width:217px;
 height:91px;
 top:100px;
 float:left;
 background:url(../Imagenes/inferior%20derecha.gif);}

Bueno os comento el problema:
Para modificar el tamaño del contenedor tengo que poner los pixeles al height y no me deja poner min-height ya que de ponerlo desapacen los laterales que son los marcos. Y lo que me gustaria seria ponerle un minimo y que si la capa que contiene el texto crece mas esta capa se haga mas alta usando lo que necesite.

No se si me he explicado bien.
Si alguien me puede echar una mano se lo agradeceria muchisimo ya que estoy loco de darle tantas vueltas.
Gracias por adelantado

Hiil · #2 (**permalink**) 06/08/2012, 11:08

Será que lo que necesitas es un clear: both??

En CSS:

.clear {clear: both;)

En HTML, después de tu div de contentenido:

<div class="clear"></div>

pablolombardo · #3 (**permalink**) 06/08/2012, 14:17

Buenass, y si ponés asi?

Código:

#marcoizquierdo {
width:98px;
min-height:579px;
float:left;
background:url(../Imagenes/marco-izquierdo.gif);
}
 
#contenedor {
width:461px;
min-height:579px;
float:left;
background:#fefecd;
}
 
#margencentralizquierdo {
width:59px;
min-height:579px;
float:left;
background:url(../Imagenes/marco-central-izquierdo.gif);
}

Te saqué todos los height 100% y les puse un min-height.

Ahí tendría que quedar bien la estructura, después para que crescan todas las columnas juntas tenés que jugar con márgenes negativos.

Saludos.