div float display after before

[biliards]

Salve a tutti,
son newbie del forum, e ho un problema che mi scervella da qualche giorno:
ho un xhtml fisso, che non posso cambiare, così organizzato:
<div class='visible'>
<div class='section'>
<div class='cell'>cella1</div>
<div class='cell'>cella2</div>
<div class='cell'>cella3</div>
<div class='cell'>cella4</div>
<div class='cell'>cella1</div>
<div class='cell'>cella2</div>
<div class='cell'>cella3</div>
<div class='cell'>cella4</div>
</div>
</div>
quel che vorrei ottenere è una specie di tabella con i div cell ma allo stesso tempo creare un riquadro personalizzato con l'uso di due immagini in visible:after per fare la parte sopra, due immagini in visible:before per fare la parte sotto, un'immagine ripetuta in y left in visible e un'immagine ripetuta in y right in section.
ho in tutto 8 blocchi div.visible perciò son costretto a scegliere questo div per mettere il grosso del riquadro e a seconda del blocco, scelgo i div dove mettere l'immagine ripetuta in y rigth.
il css è questo:
.el_visible:before {
background: url(rtbox_.png) top right no-repeat;
content: url(ltbox_.png);
display: block;
}
.el_visible:after {
background: url(rbbox_.png) bottom right no-repeat;
content: url(lbbox_.png);
display: block;
}
div.el_visible {
cursor:hand;
display:inline;
background: url(lbox_.png) top left repeat-y;
float:left;
}
div.section {
background: url(rbox_.png) top right repeat-y;
margin:0 0 0 0;
width:784px;
}
div.cell {
margin:0 0 0 10px;
# float:left;
}
se non c'è il float in div.cell, chiaramente non ho l'effetto tabella ma un elenco di div.cell però il riquadro è perfetto.. ma se mi azzardo a scommentare float:left in div.cell, ottengo l'effetto tabella ma la parte del riquadro descritta nel css visible:after me lo ritrovo spostato:
il content è a destra dell'ultimo div.cell presente nella prima 'riga' (dell'ipotetica tabella) e il background è messo come se div.visible fosse vuoto (perciò non viene usato il background ripetuto in y e il riquadro risulta basso e largo 784px).
sapete come modificare il css, mantenendo il codice html descritto, e ottenendo riquadro personalizzato e simil tabella con div.cell?
una cosa non vi ho detto, non posso unire le due immagini presenti in visible:after e in visible:before perchè div.visible non ha sempre la stessa larghezza..
ringrazio in anticipo,
buon lungo weekend... per chi lo fa

[Mich_]

Anzitutto ti chiederei di usare gli appositi tag VB quando inserisci i codici: i bottoni # e PHP sopra il box di inserimento ti possno aiutare.
Come hai inserito il coidce tu, si perde la formattazione e "ballano gli occhi".

Non e` che ho capito bene cosa hai chiesto, ma se usi il display:inline, perdi la possibilita` di dare dimensioni ai blocchi (diventano appunto inline, senza una loro forma).
Per affiancare i blocchi usa il float.
Eventualmente puoi usare il clear per togliere l'effetto float (vedi ad esempio la [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float).

Poi non so se quello che vuoi realizzare e` una tabella: in tal caso dovresti usare il tag <table>, pena la non-semanticita` del tuo codice.

[biliards]

intanto mi scuso per non aver usato le sintassi consigliate.
in effetti ho una serie di div 'visible' con display:inline che mi racchiudono delle strutture differenti.
quella più complicata è appunto quella che avevo presentato:

<div class='visible'>
  <div class='section'>
    <div class='cell'>cella1</div>
  </div>
  <div class='section'>
    <div class='cell'>cella1</div>
    <div class='cell'>cella2
  </div>
</div>

posso avere da uno a enne div 'section' con uno o più div 'cell' al suo interno. per il momento non posso modificare il codice html, perciò chiedevo se qualcuno crede sia fattibile creare una pseudo-tabella con i div 'section' e 'cell' come rispettivamente righe e celle.. in realtà riesco ad ottenerla perdendo però l'impaginazione delle immagini inserite in div.visible:after.. e mi chiedevo se era fattibile arrivare a un compromesso..
nel momento in cui potrò toccare gli script, avevo sì pensato ad una tabella, ma per ora non posso accedere agli script che creano le pagine html e posso modificare solo i css..
intanto ringrazio e proverò a vedere cosa riesco a fare seguendo l'esempio consigliato e clear.
grazie.

[Mich_]

Il codice HTML postato ora e il CSS sopra non sono congruenti per quanto riguarda i nomi.
Supponendo che nomi simili siano uguali, nel CSS mancano:
- un clear da inserire in tutti i #section
- dimensioni opportune nei vari :after e :before
Il clear serve per far andare a capo il primo blocco di ciascuna sezione

Ho poca eseprienza con gli seudoelementi, ma credo ci vogliano delle dimensioni: tieni anche presente che in alcuni browser pseudoelementi non vengono interpretati, per cui vanno usati con parsimonia e cognizionie di causa.

[biliards]

molte grazie per i consigli Mich_
ho provato a mettere clear in tutte le salse sia sul div.visible che sul div.section come #.visible e come #.section.. ma nulla.
ho risolto mettendo un display:table; in div.section perchè ho letto che mette un break prima e dopo il div così che ho risolto la storia dell'impaginazione delle immagini presenti in div.visible:after e i div.cell son diventati dei float:left; simil celle di una tabella.

notte e grazie ancora!