#1 [CSS] Como hacer dinamica las alturas de un div?
Antes que nada disculpen si pregunto una burrada.
Trabajo sobre una web que debo hacer tableless. La verdad es que cargue imagenes para probar etc. todo bien....
Todo esta bien excepto porque no puedo darle a las div izquierda y derecha una altura de 100% para que se ajusten al contenido de la central que sera dinamica...
Alguien podria ayudarme por favor?
Muchas gracias por adelantado.
Adjunto el codigo css y una captura por si es de alguna ayuda.
Trabajo sobre una web que debo hacer tableless. La verdad es que cargue imagenes para probar etc. todo bien....
Todo esta bien excepto porque no puedo darle a las div izquierda y derecha una altura de 100% para que se ajusten al contenido de la central que sera dinamica...
Alguien podria ayudarme por favor?
Muchas gracias por adelantado.
Adjunto el codigo css y una captura por si es de alguna ayuda.
Código:
html { background-color: #efefef; height: 100%; }
body { height: 100%; margin: 0; padding: 0; }
#content { text-align: left; width: 800px; height: 100%; }
p { }
td { }
a:link { color: #21459d; text-decoration: none; }
a:visited { color: #21459d; text-decoration: none; }
a:hover { color: #27274d; text-decoration: none; }
a:active { color: #27274d; text-decoration: none; }
#header{ text-align: left; margin:15px 0 0; height:74px; width:800px; vertical-align:middle; border-top: 1px solid #aaa; border-right: 1px solid #aaa; border-left: 1px solid #aaa; }
#menu { background-image: url(../assets/images/menu/menu.gif); text-align: left; margin: 0; width: 800px; height: 36px; vertical-align: middle; border-right: 1px solid #aaa; border-left: 1px solid #aaa; }
#header img{ text-align: left; float:left; width:226px; height:37px; }
.address { text-align: left; float:right; width:20%; vertical-align:middle; margin:5px 20px 0 0; }
#imagestrip { clear:both; margin-top: 0; margin-bottom: 0; height: 74px; background-image: url(../assets/images/lee_n_logo_01.jpg); background-repeat: repeat-x; text-align: left; }
li { margin-top: 0; padding-top: 0; color: #1f1f1f; font-size: 11px; font-family: arial, Helvetica, sans-serif; text-align: left; }
h2 { color: #070707; font-size: 13px; font-family: arial, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; text-align: left; padding:0 10px 0 5px; margin: 0; }
dt
{ background-color: #fff; color: #666; font-size: 12px; font-family: arial, Helvetica, sans-serif; text-align: left; padding-left: 5px; margin: 0 0 0 5px; }
dd
{ background-color: #fff; color: #666; font-size: 12px; font-family: arial, Helvetica, sans-serif; text-align: left; padding-left: 5px; margin: 0 0 10px 5px; }
img.storyImage
{ text-align: left; float:left; margin: 10px 0 0; padding-right: 10px; }
.fontchange { font-family: arial; text-decoration: none; }
#changerfont { font-family: arial; text-decoration: none; width: 50px; float: right; }
#footer { background-image: url(../assets/images/botom.gif); background-repeat: repeat-x; background-position: 0 bottom; text-align: left; width: 800px; height: 10px; float: left; margin: -9px -1px 0 0; padding: 0; order-bottom-style: solid; order-right-style: solid; }
#colcont { text-align: left; width: 800px; height: auto!important height: 100%; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; border-left: 1px solid #aaa; }
div#colboxleft { background-color: #f6f8fb; text-align: left; width: 160px; height: 100%; float: left; margin: 0; padding: 0; }
div#colboxright { background-color: #fff; text-align: center; width: 170px; height: 100%; float: right; }
div#listings { background-color: #fff; width: 170px; height: 100%; float: right; }
div#colboxmiddle { color: #000; background-color: #fff; text-align: left; width: 459px; height: 100%; float: right; margin-right: 0; margin-left: 0; padding-right: 5px; padding-left: 5px; border-right: 1px solid #ccc; }
#navi { text-decoration: none; text-align: left; list-style:none; margin:0; padding:0; }
#navi li { font-family: arial; text-decoration: none; text-align: left; text-indent: 10px; margin-right: 2px; padding-right: 2px; border-bottom: 1px solid #cccccc; }
#navi li a { color: #21459d; font-size: 13px; font-family: arial; font-weight: bold; line-height: 200%; text-decoration: none; text-align: left; }
#navili1 { text-decoration: none; text-align: left; margin-right: 2px; padding-right: 2px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; }
.content { color: #070707; font-size: 12px; font-family: arial, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 140%; text-align: left; width: auto; margin: 7px; }
.content A:link { color: #21459d; font-size: 12px; font-family: arial, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 140%; text-decoration: none; text-align: left; margin: 7px; width: auto; }
.content A:hover { color: #21459d; font-size: 12px; font-family: arial, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 140%; text-decoration: none; text-align: left; margin: 7px; width: auto; }
.content A:active { color: #27274d; font-size: 12px; font-family: arial, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 140%; text-decoration: none; text-align: left; margin: 7px; width: auto; }
.content A:visited { color: #27274d; font-size: 12px; font-family: arial, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 140%; text-decoration: none; text-align: left; margin: 7px; width: auto; }
.content img {
float: right;
margin: 7px; /* Dejas un pequeño margen para separar la imagen del texto */
}
#tdfontchange1 { color: #21459d; font-size: 9px; font-family: arial; line-height: 27px; text-decoration: none; vertical-align: top; margin-top: 0; margin-bottom: 0; margin-left: 0; padding: 0 5px 0 0; }
#tdfontchange2 { color: #21459d; font-size: 12px; font-family: arial; line-height: 25px; text-decoration: none; vertical-align: top; margin-top: 0; margin-bottom: 0; margin-left: 0; padding: 0 5px 0 0; }
#tdfontchange3 { color: #21459d; font-size: 15px; font-family: arial; line-height: 23px; text-decoration: none; vertical-align: text-top; margin: 0; padding: 0; }
#menumachine { width: 724px; float: left; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
0
