Inserire un <div> in un altro...

[tsunamin]

vorrei fare una cosa del tipo:

<div id="news_header">
<div id="news_titolo">Titolo della news...</div>
<div id="news_giorno">24 Aprile 2004</div>
</div>


In pratica ho un div header che contiene un titolo allineato a sinistra e la data (sempre sulla stessa riga ma allineata a destra...

Per fare questa operazione metto il float: left su "news_titolo" e "news_giorno".. e così risolvo.

Il problema sorge quando voglio mettere un bordino relativo al div "news_header".. in pratica il bordo NON mi circonda il titolo e il giorno... ma rimane completamente al di sopra... senza circondarmi un bel tubo..

Come faccio a dire che news_titolo e news_giorno sono all'INTERNO di news_header? io pensavo che bastasse annidare i tag <div>..

[noos]

prova al posto del div header mettere span


cosi'

<span id="news_header">
<div id="news_titolo">Titolo della news...</div>
<div id="news_giorno">24 Aprile 2004</div>
</span>

[ilduca69]

immagina i DIV come rettangoli uno dentro l'altro,
ciascuno con i suoi bordi, margini e paddings.
Quindi se dai il bordo al DIV header (che è quello più esterno)
il bordo verrà applicato SOLO all'esterno. (Situazione attuale)

Dovrai definire il bordo al DIV testo per vederlo circoscritto al testo

[tsunamin]

Originariamente inviato da ilduca69
immagina i DIV come rettangoli uno dentro l'altro,
ciascuno con i suoi bordi, margini e paddings.
Quindi se dai il bordo al DIV header (che è quello più esterno)
il bordo verrà applicato SOLO all'esterno. (Situazione attuale)

Dovrai definire il bordo al DIV testo per vederlo circoscritto al testo

no..
ho tre rettangoli...
uno grande e due piccoli..

Quello grande contiene i due piccoli.

e il bordo di quello grande deve girare attorno ai due piccoli..

così:

/----------------------------------------------\
|                                              |
|    /-----------\             /------------\  |
|    | TITOLO    |             |     DATA   |  |
|    |           |             |            |  |
|    \-----------/             \------------/  |
|                                              |
|                                              |
\----------------------------------------------/

[flanza]

prova:

<div id="news_header" >
<span id="news_titolo" >Titolo della news...</span>
<span id="news_giorno" >24 Aprile 2004</span>
</div>

oppure per vederli meglio:

<div id="news_header" style="border: solid 1px red;padding:10px;width:300px;">
<span id="news_titolo" style="border: solid 1px #000;margin:10px;width:110px">Titolo della news...</span>
<span id="news_giorno" style="border: solid 1px #000; margin:10px;width:110px">24 Aprile 2004</span>
</div>