Ciao,
devo realizzare un layout tipo quello dell'immagine in allegato.
Ho la necessita che la 1° e la 3° colonna siano equivalenti, cioè come se fossero tutt'una in altezza, mentre quella centrale deve essere a parte.
Il problmea deriva dal fatto che nella 1° colonna avrò dei contenuti nella parte del corpo, mentra nella 3° no, e ciò fa si che mentre la 1° si ridimensiona in altezza allungandosi o accorciandosi, la 3° rimane fissa.
come devo fare affinche le altezze siano sempre equivalenti?
pagina:
css:Codice PHP:
<body>
<div id="container">
<div id="colonna_1">
<div id="header">
<div id="top_1">ffff</div>
<div class="ombra_1"></div>
<div id="sotto_top_1"></div>
<div id="corpo_1"></div>
<div class="ombra_1"></div>
</div>
</div>
<div id="colonna_2"> ast wertwert wert wet wer</div>
<div id="colonna_3">
<div class="header">
<div id="top_3">dddd</div>
<div class="ombra_3"></div>
<div id="sotto_top_3"></div>
<div id="corpo_3"> </div>
<div class="ombra_3"></div>
</div>
</div>
<div id="sopra_footer"></div>
<div id="footer"></div>
</div>
</body>
Grazie anticipatamente per la disponibilità di tutti coloro che vorranno dare un aiuto.Codice PHP:/* CSS Document */
body, html {
text-align: left;
margin-top:10px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
background-color: #C8C8C8;
}
#container {
margin:auto;
width:800px;
background-color:#FFFFFF;
background-image:url(../img/sfondo_pagina.jpg);
background-repeat:repeat-y;
}
#colonna_1 {
margin-top:0px;
width:555px;
float:left;
min-height:600px;
max-height:800px;
height:100%;
background-color:#FFFFFF;
}
#colonna_2 {
width:206px;
min-height:600px;
max-height:800px;
height:100%;
float:left;
margin-top:0px;
background-color:#B95315;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
}
#colonna_3 {
margin-top:0px;
width:35px;
min-height:600px;
max-height:800px;
float:left;
background-color:#FFFFFF;
}
.header {
height:210px;
}
#top_1 {
float:left;
width:555px;
height:110px;
margin-top:20px;
background-color:#E56619;
}
#top_3 {
float:left;
width:35px;
height:110px;
margin-top:20px;
background-color:#E56619;
}
#sotto_top_1 {
width:555px;
float:left;
height:100px;
background-color:#FFFFFF;
}
#sotto_top_3 {
width:35px;
float:left;
height:100px;
background-color:#FFFFFF;
}
.ombra_1 {
width:555px;
height:9px;
float:left;
background-image:url(../img/sotto_top.jpg);
background-position:left bottom;
background-repeat:no-repeat;
}
.ombra_3 {
width:35px;
height:9px;
float:left;
background-image:url(../img/sotto_top_corto.jpg);
background-position:bottom;
background-repeat:repeat-x;
}
#corpo_1 {
float:left;
width:100%;
background-color:#E56619;
}
#corpo_3 {
float:left;
height:200px;
width:100%;
background-color:#E56619;
}
#sopra_footer {
height:3px;
padding-top:0px;
background-color:#FFFFFF;
clear:both;
width:100%;
}
#footer {
height:30px;
vertical-align:bottom;
clear:both;
width:100%;
background-color:#FFFFFF;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #B95315;
}
Roberto
Rispondi quotando