bordo come separatore di due div

[geggino]

Stavo modificando il tema di un cms è mi sono scontrato su un problema, spero banale.
Ho due div affiancati, di cui non conosco l'altezza, che costituiscono due riquadri, nel cui interno ci metterò news o simili.
Chiamiamoli divSinistra e divDestra
I div sono separati da un bordo (solo 1 bordo che esteticamente si presenta quindi al centro della pagina)...
Quindi per ottenere l'effetto del bordo separatore, ho impostato il bordo per il divSinistra...

Il problema è che se quest'ultimo risulta più piccolo in altezza rispetto a quello di destra, il bordo ovviamente si interrompe prima del dovuto.

Pensavo di risolvere, Impostando un altezza, o anche un min-height ma non ho risolto, anche perché facendo così poi ottengo tanto spazio nei contenuti, come se mi aumentasse il padding interno.
Qualche soluzione?
GRazie

[Myaku]

Originariamente inviato da geggino
Qualche soluzione?

googla "faux columns"

[geggino]

Grazie, si mi era venuta in mente l'idea dell'immagine in background, anche se a complicare le cose ci sta il fatto che il layout è fluido. Comunque ora vedrò di trovare qualcosa...poi in caso contrario se non risolvo posto i dettagli con tanto di codice css.

[geggino]

Purtroppo non ho risolto.
Cerco di entrare nei dettagli sperando in qualcuno che possa illuminarmi.

Questa è la situazione ideale:
Come vedete sono due blocchi div.
Quello di sinistra ha un bordo dotted da 1 px.
I bordi invece superiore e inferiore sono rispettivamente il bottom ed il top di altri due div presenti sopra e sotto le due colonne.




Ci sono due problemi:
Il primo è che quando la risoluzione comincia ad aumentare... si ottiene questo risultato, con il bordo che va a finire in quello sotto:



Il secondo è che se il div di sinistra è più corto, il bordo non arriva sino in basso, esempio:

/*div di sinistra*/
#bottomLcolumn {
        float:left; width: 48.5%; padding: 0 3px 0 5px;border-right: 2px dotted #2A75C5;
}

/*div di destra*/
#bottomRcolumn {
        float:right; width: 48.5%; padding: 0 5px 0 3px; margin-left:-48%;
}

Le soluzioni faux columns che ho trovato sono tutte per layout fissi o comunque lavorano solo con il colore background per creare layout nella pagina.
Credo sia un problema di facile soluzione ma non riesco a venirne a capo...
Grazie

[fcaldera]

1) metti i due box dentro un contenitore (chiamiamolo #cnt)

2) css: (valori di esempio)
#cnt { width: 501px; height: auto; overflow: hidden;}
#cnt > div {float: left; width: 250px; }
#cnt > div:first-child { margin-right: 1px; }

3) crea una gif (chiamiamola dot.gif) di 1x3 px (cioè verticale) in modo da aver il primo pixel blu e gli altri due trasparenti

4) Aggiungi
#cnt {
...
background: url(dot.gif) 250px top repeat-y;
}

5) per i punti orizzontali, puoi mettere quelli superiori come bg dei due box in alto
e quelli in basso possono essere il bg dell'elemento che segue il #cnt

[geggino]

Grazie fcaldera, ti devo una birra
in questo modo però impostando un contenitore in pixel, ottengo un layout fisso che vorrei evitare.


E Se imposto tra i due div un contenitore vuoto, con un'altezza min-height?

[fcaldera]

Originariamente inviato da geggino
Grazie fcaldera, ti devo una birra
in questo modo però impostando un contenitore in pixel, ottengo un layout fisso che vorrei evitare.

ok allora cambia
#cnt { width: 501px; height: auto; overflow: hidden;}

in
#cnt { width: auto; overflow: hidden;}

vedi se non crea problemi nel tuo caso, altrimenti applica un easyclearing (cerca su google/forum) al #cnt

[geggino]

Grazie, ho risolto perfettamente con il tuo consiglio e con qualche piccola modifica al codice.