a capo sul ridimensionamento

[danka]

ciao a tutti,
sto provando come molti i layout con i css
vorrei sapere se c'è il modo di evitare che il div right vada a capo al ridimensionamento del browser, o meglio che vada a capo ma solo dopo che il div left si è ridimensionato
in questo momento infatti ridimensionando anche di poco le dimensioni della finestra l'immagine va subito a capo e il testo non si ridimensiona
se nel div right ci metto del testo il tutto funziona perfettamente

grazie dell'aiuto

-------------------
il css:
-------------------
#container {
width: 100%;
text-align: left;
}

#content {
background-color: #fea980;
height: 320px;
border: 1px solid #fea980;
}

#left {
width: 55%;
float: left;
margin: 2em 2em 1em 1em;
text-align: justify;
line-height: 1.3;
}

#right {
}

----------------------------
il codice della pagina:
----------------------------
<div id="container">
<div id="content">
<div id="left">
testo molto lungo
</div>
<div id="right">
[img]immagine.jpg[/img]
</div>
</div>
</div>

[Mich_]

Credo che devi fare un po' di conti.

left e` largo il 55% di content + 3 px (i due margini) [ a questo proposito: sarebbe bene scrivere anche border:0; padding:0; per evitare interpretazioni libere del browser ]

right e` largo quanto l'immagine [ piu` eventuali bordi, margini, padding - anche qui sarebbe bene specificare che sono 0 ]

content e` largo quanto il container [ stessa nota di prima ] ma non e` specificato, il container a sua volta e` largo il 100% del suo contenitore [ stessa nota ].

Ora per poter capire che effettivamente la cosa e` dovuta ad un "errore del browser" e non ad un errrore di impostazione occorre conoscere le dimensioni dell'immagine e della fienstra (supponendo non ci siano altri oggetti che si inseriscono).

[danka]

intanto ti ringrazio per i suggerimenti

ho provato ad aggiungere gli attributi mancanti ma non è migliorato

comunque il problema è indipendente dalla dimensione dell'immagine (ora ad esempio sto provando con un'immagine da 200px)

il fatto è che vorrei capire cosa determina il momento in cui il div va a capo. se provo a ridimensionare lentamente la finestra del browser, quando l'immagine va a capo, il div left è molto più largo del 55% delle dimensioni della finestra in quel momento

non so se mi sono spiegato

[Mich_]

Come fai a determinare quanto sono larghi tutti i tuoi box?

Per le prove fai una cosa di questo tipo:
Metti un bordo fisso in tutti i tuoi box, con colori diversi:
border: 1px solid red; /* blue, green, ... */

Poi forse anche il right deve essere flottato (puoi usare un float: right; oppure un float: left; - per le prove e` forse meglio il float:left; )

Poi la cosa cambia a seconda del browser usato e del lingauggio della pagina: purtroppo IE ha un errore nel box-model (che di solito sparisce se usi XHTML Strict).

[danka]

ho provato a togliere tutti i padding e i margini ed in effetti in questo modo si comporta come mi aspettavo
quindi dovrò rivedere il layout in modo da gestire questo problema

il fatto è che sto lavorando nella maniera peggiore
preso un sito con le tabelle devo trasformarlo in xthml strict con layout gestito interamente da css
si faceva prima a rifarlo da zero studiando un layout ad hoc

grazie per l'aiuto

[danka]

tornando su questo argomento:

partendo da una situazione di 50% e 50% tra left e right, vorrei fare in modo che ridimensionando la finestra del browser il div left si ridimensioni il più possibile prima di mandare a capo il div right
ho provato a modificare padding e margin ma giustamente quando arriva al 50% va comunque a capo e come ragionamento non fa una piega
non c'è il modo di replicare il comportamento(probabilmente errato) delle tabelle??