Problem med stylad div

Hepp,

Jag har en div som jag stylat i min CSS. Funkar fine. Men sedan kom jag på att jag ville ha halva texten till vänster och halva till höger. Slängde därför in två span som jag satt float left respektiva right på, så här:

<div class="byline">
    <span style="float:left;">22 Juni 2005 klockan 22:28</span>
    <span style="float: right;"><a title="Läs eller kommentera artikeln: test test test" href="article.php?articleId=3">0 kommentarer</a></span>
</div>

Nu försvinner bakgrundsfärgen på diven där texten finns. Kan jag få divens egenskaper att ta överhand, eller måste jag styal varje span också?

Bakgrundsfärgen försvinner inte. Däremot syns inte diven, eftersom när man har float på både elementen så tar de inte plats på höjden i div'en, och div'en krymper ihop till ingenting...
En lösning är att ägga ett hårt mellanslag efter span'arna, men innanför div'en:

<div class="byline">
    <span style="float:left;">22 Juni 2005 klockan 22:28</span>
    <span style="float: right;"><a title="Läs eller kommentera artikeln: test test test" href="article.php?articleId=3">0 kommentarer</a></span>&+nbsp; <!-- OBS! Ta bort plustecknet mellan ampersanden och nbsp -->
</div>

En annan lösning är att explicit sätta div'ens höjd:

<div class="byline" style="height: 20px;">
    <span style="float:left;">22 Juni 2005 klockan 22:28</span>
    <span style="float: right;"><a title="Läs eller kommentera artikeln: test test test" href="article.php?articleId=3">0 kommentarer</a></span>
</div>

Både metoderna är dock opålitliga då texten sträcker sig över flera rader, så jag rekommenderar dig att stila span'arna.

float gör att div-elementet inte har något riktigt innehåll.
Använd text-align i kombination med ett float-element istället:

<div class="byline" style="text-align: right">
    <span style="float:left;">22 Juni 2005 klockan 22:28</span>
    <a title="Läs eller kommentera artikeln: test test test" href="article.php?articleId=3">0 kommentarer</a>
</div>

Tack båda för era utförliga svar. :D

Markerar dectcaps svar eftersom det var minst fullösning. ;)

dectgap skrev:

float gör att div-elementet inte har något riktigt innehåll.
Använd text-align i kombination med ett float-element istället:

<div class="byline" style="text-align: right">
    <span style="float:left;">22 Juni 2005 klockan 22:28</span>
    <a title="Läs eller kommentera artikeln: test test test" href="article.php?articleId=3">0 kommentarer</a>
</div>

Drar upp denna fråga igen. Varför blir hela innehållet högerjusterat i IE?

Ser korrekt ut i Firefox och Safari, men inte IE. :(