Få till bildtext

Hur är smartast att lägga upp en bild? Har försökt med lite olika varianter men kom får det inte riktigt att sitta. Som det är nu så ser det ut så här:

		.bildvisning {
			font-family: verdana;
			display: table;
		}
		.bild {
			padding: 3px;
			border: 1px solid #999;
		}
		.bildtext {
			font-size: .75em;
		}
		.byline {
			font-size: .65em;
			text-align: right;
			color: #333;
		}

<div class="bildvisning">
	<img src="bild.jpg" alt="" class="bild" />
	<div class="bildtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
	<div class="byline">Foto: Lorem Ipsum.</div>
</div>

Men då går ju texten förbi bilden, vilket jag inte vill. Jag vill ju att bildtext ska sträcka sig lika långt som bilden, sen ska den radbrytas. Men då måste jag ju sätta samma bredd på bildvisning som på bild vilket jag inte kan.

Hur skulle ni löst det?

Du kan lägga till en bredd på .bildvisning (tex width:4em). Eftersom den beter sig som en tabell kan den bli bredare om dess innehåll kräver det.

För IE kan du kanske lösa det med en expression som hämtar bredden på bilden...?

zcorpan skrev:

Du kan lägga till en bredd på .bildvisning (tex width:4em). Eftersom den beter sig som en tabell kan den bli bredare om dess innehåll kräver det.

För IE kan du kanske lösa det med en expression som hämtar bredden på bilden...?

Din lösning med att sätta en fast bredd på .bildvisning fungerar bra i Opera åtminstone (inte prövat nåt annat). Men vet du med dig att det inte fungerar i IE?

Har inte lust att ta en lösning som bara fungerar för vissa. Tänkte ifall det fanns en smart all-roundlösning där ute. :)

IE (före version 7) expanderar boxen för att täcka bilden men texten radbryter ändå där boxen skulle ha slutat om den inte hade expanderats.

Det går dock lösa med en liten expression. Om du har bilden som första barn till .bildvisning kan det se ut ungefär såhär:

.bildvisning { display:table; border-style:solid; width:4em; width:expression(this.firstChild.clientWidth + "px"); }

Det blir bra så. Tack zcorpan. ;)