Problema div dentro div

[zeroburns]

Salve a tutti, sono nuovo...

Volevo una delucidazione da voi riguardo a un'evento strano che accade a 2 div che cercavo di mettere uno dentro un'altro.

Secondo il mio giudizio si tratta di un bug... e sinceramente non so se questo tema è stato gia preso in considerazione.

Cmq fatto sta che ho fatto prove su piu browser e su piu computer bene o male alle ultime versioni e il risultato è sempre lo stesso

Vi spiego:

se io faccio un div contenitore tipo:

div#contorno{
width:350px;
background-color:#000;
}

div#dentro{
height:100px;
margin:15px;
background-color:#006;
}

<div id="contorno">

<div id="dentro">aaa</div>

</div>

Teoricamente dovrei vedere un div nero e piu piccolo dentro un'altro di colore blu
Il div nero (contorno) fungerebbe fa sfonto formando una cornice

il problema sta che nella visualizzazione mi appare cosi:


Stessa cosa succede se al posto del div dentro metto un normalissimo P
Come se ignorasse che il div dentro sia all'interno del contorno.

La cosa cambia se al div contorno applico un bordo, oppure metto il div dentro come float allora la visualizzazione diventa come dovrebbe:


Per chiarire io non ho bisogno di creare una cornice ma volevo soltanto porvi questo problema per sapere se è proprio cosi che deve fare oppure è un bug.

Ho visto esempi su molti libri che usano appunto div dentro altri div con margini ma senza mostrare questo errore.

Cosa ne pensate?

Grazie mille per l'attenzione.

[M0707]

non è un bug.
Il problema è che fornisci poche info nel css e i browser spesso e volentieri poi le interpretano a modo loro.
Per un risultato preciso, occorrono informazioni precise
ciao

[zeroburns]

Grazie per la risposta, era quello che pensavo anche io..

Il problema e che non vedo che tipo di informazione possa essere in piu, per un browser, il bordo.

Secondo me non ha tanta logica la storia del bordo.

Dico che il div deve essere largo un tot, che al suo interno ne contiene un'altro, di una certa altezza e un certo margine...

Quindi informazioni utili all'altezza e al margine vengono forniti, non mi sembra di evadere informazioni utili.

Anzi... secondo te quali informazioni possono mancare per farlo interpretare al meglio?

Perche mettere l'altezza del contenitore mi percuote lo scopo del contenitore, che dovrebbe essere ad altezza non definita perche può contenere piu roba.

E non mi vengono in mente altri parametri "logici" per questo scopo.

Grazie di nuovo.

[manton]

Io non sono proprio un esperto però se mi permetti di suggerirti due cose
background-color:#0000ff; il codice colore sono sufficienti 3 cifre quando queste sonno tutte uguali.
Margin : 3px auto; prova ad aggiungere auto

[zeroburns]

Originariamente inviato da manton
Io non sono proprio un esperto però se mi permetti di suggerirti due cose
background-color:#0000ff; il codice colore sono sufficienti 3 cifre quando queste sonno tutte uguali.
Margin : 3px auto; prova ad aggiungere auto

Grazie per il tuo suggerimento ma come puoi vedere nello screen il codice per il colore e giusto cosi.

Il colore può essere dato in differenti forme:

RRGGBB classico #ffffff
o
RGB quindi #ff0

e altri predefiniti e percentuali di rgb etc etc.

Nel mio caso logico che se devo fare un colore piu complesso di uno predefinito (I famosi colori only for web di photoshop per intenderci) debbo per forza usare 6 cifre:
tipo: #5e3535
Ma come ho messo nell'esempio per fare un blu standard web color basta quel codice.
Infatti e come se avessi messo : 000066 invece ho levato i doppioni 006

Nel caso dell'auto da quello che so io è un'opzione che serve ai margini per centrare un box in orizzontale non vedo cosa mi possa servire per il problema in questione.

Se puoi spiegarmelo.

Grazie mille cmq per il tuo tempo

[M0707]

#contorno{
	position: relative;
	display: block;
	width: 350px;
	padding: 15px;
	background-color: #000;
	z-index: 0;
}

#dentro{
	position: relative;
	height: 100px;
	background-color: #006;
	z-index: 0;
}

usando questo codice, otterrai il risultato sperato.
+ che usare un margin per il div interno, devi specificare un padding per il contenitore, perchè è il contenitore che gerarchicamente decide per il suo contenuto

ciao