Buongiorno a tutti!
ho un problema di impaginazione con i CSS.
vi allego l'immagine con la struttura che vorrei ottenere: vorrei creare un box "contenitore" al cui interno ci fossero altri 3 box: uno allineato a sinistra e contenente un'eventuale presentazione della pagina (che chiamo "testocolsx" nell'immagine allegata), uno allineato a destra contenente le news ("boxnews") e una serie di uno o più box (a seconda del numero di elementi da elencare) dello stesso tipo posizionati sotto quello delle news e ancora a destra di quello di presentazione ("boxrealizzazioni").
Le premesse sono 2:
1- non posso usare il posizionamento assoluto perchè il box contenitore "generale" deve ridimensionarsi con la finestra del browser e la larghezza dei box deve sempre essere il 50% (o 48%, per lasciare del margine) della finestra. Per questo non posso posizionare in maniera assoluta soprattutto i due box a destra.
2 - i "boxrealizzazioni" devono essere larghi metà pagina se esiste anche "testocolsx", ma la devono al contrario occupare tutta se non c'è "testocolsx" (come nell'immagine che allego nel prossimo post".
I problemi sono:
1- il box contenitore deve allungarsi a seconda dell'altezza dei box che contiene
2- ma dato che "boxnews" e "boxrealizzazioni" devono stare alla destra di "testocolsx", questo deve avere(credo) la proprietà "float: left", cosa che però lo fa uscire dal flusso html e quindi in Opera lo slega dal box contenitore. Per questo, il box contenitore non si allunga all'allungarsi del box "testocolsx".
Inoltre ho lo stesso problema all'interno dei box "boxrealizzazioni", dato che vorrei mettere delle piccole immagini sulla sinistra e il testo alla loro destra, ma in opera se imposto le immagini "float: left" esse si slegano da "boxrealizzazioni" che quindi non assume l'altezza dell'immaginetta.
Come posso fare? Se avete bisogno vi posto il codice CSS che ho realizzato fino a ora, ma è completamente sbagliato e quindi non credo possa essere utile.
Ah, un'ultima cosa: "testocolsx" e "boxnews" hanno un bordo da un px attorno, mentre "boxrealizzazioni" ha solo il bordo inferiore. Un altro problema che ho incontrato è che settando "testocolsx" con "float: left" il testo contenuto in "boxnews" e "boxrealizzazioni" floattava a destra del box "testocolsx" mentre il loro bordo proseguiva sotto di esso fino al margine sinistro del box generale. In ogni caso, in questo modo "testocolsx" era slegato dal flusso e quindi non stava dentro il box generale, che non si allungava.
Rispondi quotando