Problem med stylad div

4 svar · 513 visningar · startad av K@llen 26 juni 2005

K@llenMedlem sedan mars 20032 667 inlägg

Frågan26 juni 2005 23:24#1

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å?

nitro2k01Medlem sedan aug. 20039 340 inlägg

26 juni 2005 23:38#2

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.

dectgapMedlem sedan sep. 20021 655 inlägg

26 juni 2005 23:38#3

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>

K@llenMedlem sedan mars 20032 667 inlägg

26 juni 2005 23:44#4

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

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

K@llenMedlem sedan mars 20032 667 inlägg

5 sep. 2005 09:46#5

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. :(