Divs no flotan deacuerdo alos otros

alx_salazar · #1 (**permalink**) 01/08/2012, 12:45

hola mios tengo maquetado en esta pagina una pagina y el asutno es q quiero q el footer rrecorra deacuerdo al contenedor principal pero no lo hace se queda estatico no se que hacer ahora lo pongo el maquetad y el css, de antemano les gardezdo por susrespuestas espero puedan ayudarme no se q esta sucediendo ene l css.

Código HTML:

<?php  

 // no direct access 

 defined( '_JEXEC' ) or die( 'Restricted access' );?>

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>
<jdoc:include type="head" /> 
<?php if ( $my->id ) { initEditor(); } ?>

 <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" /> 
 <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" /> 
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/plantilla/css/template.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<title>titulo</title>

<body>
<div id="cuerpo">
  <jdoc:include type="modules" name="cuerpo" style="xhtml"/>

  <div id="search"> 
  <jdoc:include type="modules" name="buscar" style="xhtml"/>
  </div><!-- FIN!-->

<div id="header">
<h1 class="logo">EQUIPOS<br />
  DE MEDICI&Oacute;N Y CONTROL DE CALIDAD</h1>
</div><!-- FIN-->

<!-- FIN LOGO CABECERA Y BUSCADOR!-->
  <div id="contenedor_principal">
			  <jdoc:include type="component" />
	      <!-- Comienzo Contenedor fondo de cuadros -->
	<div id="cuadros"> </div>
          <!-- Fin Contenedor cuadros -->
          
    <!-- Comienzo contenidor1 -->      
    <div align="center" id="laboratorio"> 
    <jdoc:include type="modules" name="laboratorio" style="xhtml" />
    </div><!-- Fin contenidor1 -->
    <!-- Comienzo contenidor2 -->
    <div id="ganaderia">
    <jdoc:include type="modules" name="ganaderia" style="xhtml" />
    </div><!-- Fin contenidor2 -->
    <!-- Comienzo contenidor3 -->
    <div id="industria">
          <jdoc:include type="modules" name="industria" style="xhtml" />
    </div><!-- Fin contenidor3 -->
    <!-- Comienzo contenidor4 -->
    <div id="agricultura">
    <jdoc:include type="modules" name="agricultura" style="xhtml" />
    </div><!-- Fin contenidor4 -->
    <!-- Comienzo contenidor5 -->
    <div id="invernaderos">
      <jdoc:include type="modules" name="invernaderos" style="xhtml" />
    </div><!-- Fin contenidor5 -->    
  </div><!-- Fin contenidor_principal-->    
  <!--inicio pie -->    
   	<div id="pie">
    PIE.....   
  </div><!-- Fin pie-->
</div><!-- Fin cuerpo-->

</body>

</html>

y css

Código:

body {
font-size: 99%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
color: #000;
width:99%;
overflow:auto;
background:url(../../miplantilla/images/background.jpg);
}


h1.logo a {
	width: 300px;
	display: block;
	background: url(../images/logo.png) no-repeat;
	height: 80px;
	position: relative;
	z-index: 100;
	left: 352px;
	margin-top:-19px;
}

////////////////////////*/	

#header{
	width:99%;
	float:left;
	position:relative;
	text-align:center;
	}
/*CUADROS VERDES*/
#cuadros{
	position:absolute;
	top: 150px;
	float:left;
	z-index: 0;
	width: 607px;
	height: 453px;
	background: url(../images/cuadros.png) no-repeat;
	margin-left:120px;
}

#contenedor_principal{
	height:380px;
	float:left;
	margin-left:20px;
	margin-right:20px;
	width:98%;
	}	

#laboratorio {
	 clear:both;
	position: absolute;
	left: 129px;
	top: 179px;
	z-index: 4;
	width: 172px;
	height: 243px;
	}

#ganaderia {
	position: absolute;
	left: 274px;
	top: 320px;
	z-index: 4;
	width: 227px;
	height: 184px;
	}

#industria {
	position: absolute;
	left: 331px;
	top: 153px;
	z-index: 5;
	width: 251px;
	height: 201px;
	}

#agricultura {
	position:absolute;
	left: 639px;
	top: 145px;
	z-index: 6;
	width:250px;
	height:202px;
	}

#invernaderos {
	position:absolute;
	left: 505px;
	top: 307px;
	z-index:4;
	width:272px;
	height:180px;
	}

#pie{
	position:relative;
	width:99%;
    float:left;
    clear:both;
	}