Div padroni di sè, che non stanno dove vorrei che stessero

[bob18]

salve ragazzi,
a parte il titolo scherzoso, il post è serissimo in quanto non riesco a trovare una soluzione per il mio problema

vengo al dunque... ho un problema con la posizione di alcuni div. Il codice mi sembra corretto, solo che quando vado a visualizzare una anteprima della pagina compare l'errore che vedete nell'allegato (screenshot sia con IE che con FF).

Le ho provate tutte ma non riesco a venirne a capo.

Vorrei che i due div bianchi venissero posizionati uno in alto a destra (e ci sta correttamente), l'altro esattamente in alto a sinistra. Come vedete quest'ultimo mi crea qualche problema.
Il codice CSS è il seguente:

BODY {
	margin-top: 15;
	padding: 0;
	text-align: center;
	background-color: #999999;
	font-family: tahoma, verdana;
}
div#top {
	width: 700px;
	height: 105px;
	left: 0;
	top: 0;
	text-align: left;
	margin: 0 auto;
	color: #FFFFFF;
	font-size: 15px;
	background-color: #990000;
}
div#blabla {
	position: relative;
	width: 70px;
	height: 10px;
	left: 0;
	top: 0;
	background-color: #FFFFFF;
}
div#blabla2 {
	position: relative;
	width: 70px;
	height: 10px;
	left: 630px;
	top: 0px;
	background-color: #FFFFFF;
}

Quello html:

<div id="top">
  <div id="blabla2"></div>
  <div id="blabla"></div>
  div top
</div>

Non so più cosa fare , sapreste dirmi cosa succede?




Grazie mille!!!

[pierofix]

Prova a dare position:relative al div '#top' e position:absolute ai due figli.

[troglos]

prova con

div#blabla {
	float:left;
	width: 70px;
	height: 10px;
	background-color: #FFFFFF;
}
div#blabla2 {
	float:right;
	width: 70px;
	height: 10px;
	background-color: #FFFFFF;
}

[bob18]

grazie ragazzi, il risultato è perfetto utilizzando entrambe le soluzioni.

altra domanda: come mai, pur avendola impostata a 10px, Firefox visualizza l'altezza dei div "blabla" molto più piccola?
(guardate pure l'immagine allegata al primo post)

è un bug di Firefox?


grazie

[pierofix]

Ma i due div sono vuoti?

[bob18]

per ora si, conterranno però una immagine per il bordo arrotondato.
so già che quando conterrano testo o immagini il problema sarà risolto però, siccome altre volte mi è capitato di avere questo problema con div vuoti, vorrei capire perchè succede.

grazie!

ciao!

[pierofix]

Se l'immagine è puramente grafica - non fa cioè parte del contenuto - allora va gestita tramite sfondi, quindi tramite CSS. Ricorda sempre che div sta per "division", ovvero macroarea: è un marcatore che permette di raggruppare logicamente i contenuti e dare maggior ordine alla struttura. Capirai bene come una macroarea vuota sia priva di significato.

[bob18]

beh allora a che serve l'attributo height applicato ai div?

[Mich_]

Nelle specifiche dell'HTML c'e` una postilla che permette ai browser di non visualizzare un oggetto se questo e` vuoto. Viene proprio ignorato (e anche l'eventuale CSS applicato non viene utilizzato).

Questo dovrebbe rendere inutile l'ultima domanda.


Non chiedermi perche` c'e` quella postilla, ma immagino che se le pagine sono create dinamicamente lato server, il programmatore imposta la struttura della pagina in un template, poi un programma (automatico e stupido, come tutti) riempie i vari blocchi in base al database.

Quindi puo` capitare di avere dei blocchi vuoti, che a questo punto sono inutili, e il browser li deve ignorare: ne guadagna l'occupazione dello spazio che la velocita` di rendering.