Ciao a tutti, questo è il primo post.
Scrivo perché ho un problema con un'immagine.
In un layout a 3 colonne con header e footer vorrei che questa immagine rimanga sempre al fondo della prima colonna, così quando il div "page" si apre per mostrare il suo contenuto questa immagine ne segue l'estensione.
Il layout è su wordpress, quindi c'è di mezzo il php.

Non riuscendo a posizionarla in altro modo ho creato un div con id="polimeri" con la possibilità così di metterlo dove meglio credo.

L'ho già posizionato:
- nel div "side1", ma ovviamente la sua altezza non pareggia quella del div left quindi quando questo si espande la mia immagine rimane alta dal bottom;
- nel div "left", anche se questo div si espande in base a "content" la proprietà position bottom rimane riferita a side 1 (?);
- nel div "content", qui riesco a posizionarlo dove voglio, usando position con misura negativa a sinistra, ma quando le pagine hanno poco contenuto l'immagine finisce sul menù nascondendo alcuni pulsanti;
- nel div "page", anche se si espande in base a"content" e "left" la proprietà position bottom rimane riferita a side 1 (?);

Ho usato sempre "position: relative" perché in teoria si riferisce all'ultimo div in cui il div polimeri è contenuto giusto?


Qui di seguito la struttura semplificata HTML

<body>
<div id="top">
<div id="topi">
</div>
</div>

<div id="page">
<div id="left"
<div class="narrowcolumn" id="content">
<div>
[img][/img]
</div>
<div class="post">
<div class="entry">
</div>
</div>
</div>
<div class="side1">
<ul>
<li class="boxy">
[/list]
<div id="polimeri">
[img][/img]
</div>
</div>
</div>

<div id="right">
<div class="side2">
<div>
[img][/img]
</div>
<ul>
<li class="editoriale">


[/list]
</div>
</div>
<br class="clear"/>
</div>

<div id="out-foot">
<div id="footer">
<div id="lang_footer">
</div>
</div>
</div>

</body>

e qui il codice css ridotto all'essenziale

#top {
margin: 0 auto;
width: 950px;
position: relative;
height: 200px;
border-bottom: 1px solid #999999;
}
#topi {
left: 0;
height: 131px;
top: 0;
position: absolute;
width: 950px;
height: 200px;
}
#page {
text-align: left;
width: 950px;
margin: 3px auto 3px;
border-bottom: 1px solid #999999;
background-image: url(images/fondo.gif);
background-repeat: repeat-y;
}
#polimeri {
position: relative;
width: 210px;
left: -210px;
float: left;
}
#header {
background: #1BACF2;
border-bottom: 5px solid #B98718;
}
#headr {
width: 753px;
position:absolute;
margin: 206px 0px 0px 0px;
padding: 0px 5px 0px 5px;
height: 18px;
left: 0;
float: left;
background:#d3d3d3;
color: #666666;
text-align: center;
font-size: 0.8em;
}
#left {
float: left;
width: 730px;
}
#right {
float: right;
width: 220px;
}

#content {
width: 520px;
float: right;
}
#content-wide {
width: 950px;
}
#content li{
padding-left:10px;
list-style-type: none;
}
#footer {
background: #004f36;
margin: 0 auto;
text-align: center;
width: 950px;
color: #FFFFFF;
font-size: 0.7em;
}