[css] Problema div position absolute ridimensionamento e posizione

Salve a tutti,
ho un div main position:absolute, in questo div ce ne sono altri due rispettivamente div images e div content con position non settata, quando il testo all'interno di content si allunga esce fuori dal div finendo sullo sfondo.
ecco il codice:

Codice HTML:

---

<div id="main">
 <div id="images">
  <img .... />
  <img ..../>
 </div>
 <div id="content">
  <?php get_content_home(); ?>
 </div>
</div>

---

ecco il css:

Codice:

---

#main {
        padding:0;
        position:absolute;
        background-color:#ededed;
        border:2px solid #FFFFFF;
        box-shadow:1px 1px 10px #666666;
        width:650px;
        top:22px;
        left:254px;
        min-height: 522px;
}
#images {
        margin:0 auto;
        padding:0;
        height:246px;
}
#content {
        padding-top:10px;
        max-width:655px;
        height:250px;
        margin-left: auto;
        margin-right: auto;
        margin-top:0;
        margin-bottom:0;
        text-align:center;
        background-color:#ededed;
}

---

ecco il link
generazionenergy.altervista.org
come posso fare per far si che i div main e content si allunghino col testo?
Grazie in anticipo per la risposta.

Stai costruendo il layout nel modo sbagliato, usando così i posizionamenti assoluti il sito è visualizzabile come vorresti tu solamente con alte risoluzioni.

concordo con karl94...stai costruendo il layout nel modo sbagliato...comunque sia per risolvere il tuo problema devi aggiungere allo stile di #content questa riga:

Codice:

---

overflow:auto;

---

Ti comparirà (quando necessario) una barra di scorrimento sulla destra del blocco per vedere tutto il contenuto

Ciao

anchio avevo il sospetto che fosse sbagliato il layout ma non sapevo come fare per posizionare main sopra red.
Cosa mi consigliate?

Dipende, puoi spiegare dettagliatamente come vorresti che fosse il layout?

allora il div red che sarebbe il quadrato rosso con il menu con sovrapposto il div main quello grigio con immagini e testo ed in fondo il footer.
il sito è questo:
generazionenergy.altervista.org

Sì, ma come deve essere posizionato il tutto? Come si dovrebbe adattare a seconda dei contenuti e delle differenti risoluzioni?

ah ok,
se ho capito bene la domanda:
il div rosso deve essere attaccato al bordo destro della pagina sempre e il footer sempre in basso. Chiedo scusa in anticipo se non avessi capito ancora la domanda :P

Se il riquadro contenente il menù lo appiccichi al bordo destro, allora il riquadro contenente il testo lo vuoi appiccicato a sinistra? Senza alcun margine? E poi, il riquadro del menù deve avere una larghezza fissa o variabile (in funzione della larghezza della finestra del browser)? E l'altezza? Deve andare di pari passo con l'altezza del contenitore a sinistra o deve essere indipendente?

Il riquadro rosso:
-sempre attaccato a destra e in alto alla pagina(anche se la pagina si zoomma)
-larghezza e altezza fisse
-Il menu:
--altezza fissa
--larghezza variabile in base alla lunghezza delle voci;
Il riquadro testi:
-bordo destro tocca appena il bordo sinistro delle voci dei menù
-margine sopra poco(10-15px)
-altezza(min 522px) variabile in base al testo che c'è dentro
-lunghezza fissa
Il footer:
-sempre a fondo pagina
-centrato
Spero di aver dato informazioni chiare

Prova con questo fogilo di stile:

Codice:

---

@charset "utf-8";

* {
    margin: 0pt;
}

html, body {
    height: 100%;
}

body {
    background-image: url("../images/top_bg.jpg");
    margin: 0pt;
    padding: 0pt;
    z-index: 0;
}

h1 {
    color: #8B0E12;
    font-family: 'Century Gothic';
}

h2 {
    color: #CC6600;
    font-family: 'Century Gothic';
    font-size: 19px;
}

h3 {
    color: #CC6600;
    font-family: 'Century Gothic';
    font-size: 16px;
}

a {
    color: #CC6600;
    text-decoration: none;
}

p {
    color: #8B0E12;
    font-family: 'Century Gothic';
}

a:visited {
    color: #FF9966;
    text-decoration: none;
}

a:hover {
    color: #FF9966;
    text-decoration: none;
}

#red {
    background-color: #8B0E12;
    border: 1px groove #FFFFFF;
    box-shadow: 2px 2px 2px #999999;
    float: right;
    margin-left: -100%;
    margin-right: 5px;
    margin-top: 5px;
    width: 60%;
}

#menu {
    margin-left: auto;
    margin-right: 43px;
    width: 151px;
}

#menu ul {
    color: #FF9900;
    list-style: none outside none;
    padding: 0pt;
}

#menu li {
    background-color: #79090C;
    margin-bottom: 4px;
    min-height: 25px;
    min-width: 150px;
    padding-right: 4px;
    padding-top: 2px;
    text-align: left;
}

#menu ul li a {
    color: #FF9900;
    margin-left: 5px;
    text-decoration: none;
}

#menu ul li a:hover {
    color: #FFFFFF;
    margin-left: 5px;
    text-decoration: none;
}

#menu ul li a[name="attivo"] {
    color: #FFFFFF;
}

#logo {
    background-image: url("../images/genplus.png");
    background-position: right center;
    background-repeat: no-repeat;
    height: 80px;
}

#main {
    background-color: #EDEDED;
    border: 2px solid #FFFFFF;
    box-shadow: 1px 1px 10px #666666;
    float: left;
    margin-left: 5px;
    margin-right: 220px;
    margin-top: 15px;
}

#images {
    height: 246px;
    margin: 0pt auto;
    padding: 0pt;
}

.nivoSlider {
    background: url("images/loading.gif") no-repeat scroll 50% 50% transparent;
    height: 246px;
    position: relative;
    width: 650px;
}

.nivoSlider img {
    display: none;
    left: 0px;
    position: absolute;
    top: 0px;
}

.nivoSlider a {
    border: 0pt none;
    display: block;
}

#content {
    background-color: #EDEDED;
    margin: 0pt auto;
    max-width: 655px;
    padding-top: 10px;
    text-align: center;
}

#contentc {
    background-color: #EDEDED;
    margin: 0pt auto;
    padding-top: 10px;
    text-align: center;
}

#footer {
    clear: both;
    font-size: 12px;
    margin: 0pt;
    padding: 10px 0pt 0pt;
    text-align: center;
    width: 100%;
}

---

È necessario anche spostare il div#logo e metterlo come primo figlio.

Inoltre ti do qualche consiglio: non usare quei brutti br per creare una spaziatura, usa i margini del foglio di stile. Inoltre nell'elemento H1 consiglio di mettere il nome del sito (anche se non è graficamente visibile, è importante per i sistemi automatici come i motori di ricerca), magari lo puoi mettere come figlio del sopra citato div#logo, e poi nascondere il testo via CSS.