Solucionar crecimiento de capa padre

josecarbono · #1 (**permalink**) 23/08/2008, 12:26

Buenas tardes amigos, mi duda es como solventar una situacion q se me ha presentado varias veces pero sin recurrir a lo q ahora mismo se hizo q es de poner una capa al final con unos clear. Le muestro el codigo para q se entienda mejor..

Código HTML:

<!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=iso-8859-1" />
<title>Panel de Administraci&oacute;n</title>
<link href="adminstilos.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="cinta">
  <div id="logout"><a href="javascript:;" class="logout">Cerrar Sesion</a></div>
  <div class="datos_login" id="datos_login">Bienvenido: <strong>Nombre de Administraidor</strong> </div>
</div>
<div id="wrap">
  <div id="menu_admin">
    <?php include('menu_izq.php'); ?>
  </div>
  <div id="contenido_wrap">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><div align="center" class="titulos_secciones">Incluir Nuevo Administrador </div></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
  </div>
  <div class="corte">Copyright &copy;</div>
</div>
</body>
</html>

El CSS:

Código:

p {
	margin: 0px;
}
#index {
	text-align: center;
	vertical-align: middle;
	width: 250px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	padding-top: 20px;
	height: 120px;
	border: 2px dotted #CCCCCC;
}

#bienvenida {
	color: #666666;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin-top: 50px;
}
#creditos {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: normal;
	color: #999999;
	text-align: center;
	margin-top: 50px;
	text-decoration: none;
}

#creditos a{
	text-decoration: none;
	color:#666666;
}
#creditos a:hover{
	text-decoration: underline;
	color:#cccccc;
}


#cinta {
	height: 50px;
	width: 100%;
	margin-bottom: 30px;
	background-color: #005898;
}
#wrap {
	padding: 10px;
	height: auto !important;
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	border: 1px dotted #CCCCCC;
}

.corte {
	clear: both;
	margin-top: 20px;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #999999;
}
#contenido_wrap {
	float: left;
	height: auto;
	width: 545px;
}
.titulos_secciones {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 80%;
	font-weight: bold;
	color: #006699;
	text-decoration: none;
}



#menu_admin {
	float: left;
	height: auto;
	width: 200px;
	margin-right: 5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 80%;
	font-weight: normal;
}
#menu_admin ul, li {
list-style-type:none;
}
#menu_admin ul {
	margin:0;
	padding:0;
}

#menu_admin li {
border-bottom:1px solid #efefef;
}
#menu_admin a{
	color: #006699;
	text-decoration: none;
	display: block;
	padding-bottom: 2px;
}

#menu_admin a:hover{
	color: #008BCE;
	}

.menu_title {
	font-weight: bold;
	color: #004D71;
	height: 15px;
	width: 188px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 10px;
	margin-bottom: 5px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}



label,input {
	display: block;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}

label {
	text-align: right;
	width: 70px;
	padding-right: 5px;
}

br {
	clear: left;
}
body {
	margin: 0px;
}
.labels {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: bold;
	color: #666666;
}
.campos {
	font-family: tahoma, verdana, "helvetica Condensed";
	font-size: 11px;
	font-weight: normal;
	color: #333333;
	border: 1px solid #666666;
}
.links, a {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	font-weight: normal;
	color: #005898;
	text-decoration: none;
}
.links a:hover{
text-decoration: underline;
}
#cinta #datos_login {
	float: right;
	height: 20px;
	width: 300px;
	margin-top: 15px;
	margin-right: 5px;
	text-align: right;
}
#cinta #logout {
	float: right;
	height: 22px;
	width: 100px;
	margin-top: 15px;
	margin-right: 5%;
	text-align: center;
	vertical-align: middle;
}
.logout{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #006FBF;
	border: 1px solid #FFFFFF;
	padding: 2px;
}
.datos_login {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight: normal;
	color: #FFFFFF;
}

.logout:hover{
background-color:#007CD9;
}
.menu_title_item {
	font-size: 11px;
	font-weight: bold;
	color: #006699;
	height: 15px;
	width: 188px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #F9F9F9;
	background-color: #F9F9F9;
}

La idea es lograr q la capa padre (wrap) crezca a medida q crece "menu_admin" o "contenido_wrap" o las dos o cualquier cosa dentro de ellas sin recurrir al "hack" <div class="corte"></div>

Al principio sin ese "hack" en IE se veia bien pero en Firefox no, pero como se q al q hay q hacerle caso es al Firefox pues busque en internet como arreglarlo y consegui ese "hack", quisiera saber la forma de arreglarlo sin esos "hacks".

Muchas gracias..

DandaveX · #2 (**permalink**) 23/08/2008, 14:38

la capa menu_admin la has puesto como flotante (float:left), esto quiere decir que está flotando sobre el contenido de la página y por eso no ocupa ningún espacio entre el código anterior y posterior.

para que se cubra ese espacio hay que poner esos "hacks", que son los estilos clear:(both, right o left);

no hay más formas de hacerlo, a no ser que encuentres otra forma de colocar esa capa sin que quede flotando a la izquierda.

saludos.

Mikmoro · #3 (**permalink**) 23/08/2008, 15:34

Puedes hacerlo poniendo a tu caja padre un overflow: auto;, ya que al no tener tamaño de alto, esto le hará crecer a pesar de que su contenido esté flotado.

No obstante, dar un corte no es ningún "hack", es un recurso muy utilizado y muy práctico, que nada tiene que ver con "trucos raros".

josecarbono · #4 (**permalink**) 23/08/2008, 17:40

Gracias por las respuesta amigos, me han servido mucho para entender esos conceptos que los tenia no muy claros.

Alejo18 · #5 (**permalink**) 24/08/2008, 16:35

Solo te doy una recomendación, en tu código CSS hay muchos colores con los hexa repetidos

poner color: #FFFFFF es igual que color: #FFF , solo si los 3 hexa primeros se tepiten

Erebus · #6 (**permalink**) 25/08/2008, 14:10

Cita:

Iniciado por Mikmoro

No obstante, dar un corte no es ningún "hack", es un recurso muy utilizado y muy práctico, que nada tiene que ver con "trucos raros".

Se me hizo bastante insolito que considerara "clear:both" como un hack.
Digo, yo lo uso para todo; las personas de las que he aprendido lo usan casi como un standard no escrito.
Anyways, saludos. (: