Un div con testo invaso da quello esterno

mentelibera

Un div con testo invaso da quello esterno

Salve a tutti, sto cercando di dare un riquadro con un vertice in fondo a destra di un div esterno (contenente l'informazione vera e propria della pagina, progettata con la posizione assoluta) in cui mettere una serie di link. Ecco il codice:
Xhtml:
[html]
<div id="esterno">

<div id="riquadro">
<ul>
<li><strong>notizia 1</strong> Buongiorno buon pomeriggio buonasera buonanotte</li>
<li><strong>notizia 2</strong> Good morning, good afternoon, good evening, good night,</li>
</ul>
</div>
</div>
[/html]Css:
[html]
#riquadro{
position:absolute;right:0px;bottom:0;width:100px;border:1px solid Black;
}
[/html]Ma vedo che il testo che è presente nel div esterno invade quello contenuto nel riquadro.
Volevo cortesemente chiedere come fare per evitare la sovrapposizione di testi.

Grazie.

codencode

Se l'effeto che vuoi ottenere è che il testo del div esterno scorra intorno al riquadro, con la situazione che hai tu non puoi ottenerlo.

mentelibera

Ho capito.
Ora sto facendo delle prove cambiando l'impostazione mettendo il div esterno con posizione relativa (da assoluta) ma il problema persiste, o forse c'è qualcosa che mi sfugge.

Sto pensando di cambiare l'impostazione di quel riquadro che anziché lo scenario precedentemente descritto, invece ne ricopra tutta la larghezza inferire separando la parte sovrastante del testo con una linea, ma questa a sua volta è limitata dal padding definito nel div "esterno"...

Ecco il semplice codice che ho scritto:
[html]
<div id="esterno">

<div style="border-top:1px solid Black;padding-top:10px;margin-top:10px;">
<ul>
<li><strong>notizia 1</strong> Buongiorno buon pomeriggio buonasera buonanotte</li>
<li><strong>notizia 2</strong> Goodmorning goodafternoon goodevening goodnight</li>
</ul>
</div>
</div>
[/html]C'è un modo per estederla da bordo a bordo?

Grazie

codencode

Se invece del padding al div esterno dai il margin al contenuto del div esterno?
In alternativa puoi tirare fuori fuori dal div esterno il div riquadro.

mentelibera

Ho pensato ai tuoi suggerimenti e per il primo caso ho risolto facendo un div per definire la linea orizzontale (mettendo gli stessi valori del padding del div esterno come margin del div della linea per far congiungere i bordi) e poi un altro per il contenuto vero e proprio (facendone con un solo mi sembrava che venissero dei problemi di disallineamento, ma ho fatto poche prove ed ho lasciato stare):
[html]
<div id="esterno">

<div style="border-top:1px solid Black;margin:10px -15px 0 -15px;"> </div>

<div style="font-size:80%;">
<ul>
<li><strong>notizia 1</strong> Buongiorno buon pomeriggio buonasera buonanotte</li>
<li><strong>notizia 2</strong> Good morning, good afternoon, good evening, good night</li>
</ul>
</div>
</div>
[/html]Ovviamente al precedente codice ho impostato nel blocco del riquadro solo la font che deve essere un po' più piccola ma che poi potrebbe essere aggiustata meglio in seguito magari nel file del CSS.

Riguardo la soluzione che dicevi di portare esternamente il div del riquadro ora mi sfugge qualcosa, o meglio non avevo detto che il layout è composto da due colonne e subito sotto c'è il footer.
Come impostazione ho utilizzato un position:absolute e per questo caso non saprei come si possa realizzarla.