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ó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> </td>
</tr>
</table>
</div>
<div class="corte">Copyright ©</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..