[Althalos]

Här är en bild på mitt problem:
http://calle.ekdahlproduction.com/buggscrn.png

Den högra delen hamnar alltså nedanför mittendelen och den vänstra delen. Följande är min kod:

										<div class="pricetag">
											<div class="pricetag-left"></div>
											<div class="pricetag-middle">999</div>
											<div class="pricetag-right"></div>
										</div>

och CSS:

div.pricetag 
{
	position: absolute;
	top: 200px;
	left: 400px;
	height: 50px;
}
div.pricetag-middle
{
	background: transparent url(../images/pricetagbg.png) repeat-x top left;
	height: 50px;
	margin: 0 10px 0 60px;
}
div.pricetag-left
{
	background: transparent url(../images/pricetag.png) no-repeat 0 0;
	width: 60px;
	height: 50px;
	float: left;
}
div.pricetag-right
{
	background: transparent url(../images/pricetag.png) no-repeat -140px 0;
	width: 10px;
	height: 50px;
	float: right;
}

Jag har verkligen försökt förstå mig på detta, men det går inte.

[qson]

Känns som du bör ha en tydligare rubrik... Typ CSS-position eller CSS float eller något...

Att de lägger sig som de gör beror förmodligen på att delarna är 1px bredare än containern.
Prova att minska bredden med en eller flera pixlar, eller öka marginalen.
Sen vet jag inte om 999 skall ligga uppe i högra hörnet, men du kan använda line-height för att lägga den "mitt i" eller kanske absoluta positioner...

Hoppas detta hjälpte.

[Nattkatt]

Det ser ut som att du har missat float på "div.pricetag-middle".

[Althalos]

Containern har ingen specifik vidd, saken är att den ska kunna bli bredare. Här är en ny bild på hur det t.ex. blir när man lägger till fler nior (och jag har nu fixat så att niorna ser ut som jag vill): http://calle.ekdahlproduction.com/bugscrn2.png (detta visar alltså att containern kan bli hur bred som helst)

Lägger jag till float på middle så blir det såhär:
http://calle.ekdahlproduction.com/bugscrn3.png

[Nattkatt]

Är det någon extra css som du har glömt att visa?

	.pricetag { position:absolute;top:200px;left:400px;height:50px; }
	.pricetag div { height:50px;float:left; }
	.pricetag .pricetag-left { width:60px; }
	.pricetag .pricetag-middle { margin:0 10px 0 60px; }
	.pricetag .pricetag-right { width:10px; }

	<div class="pricetag">
		<div class="pricetag-left"></div>
		<div class="pricetag-middle">999</div>
		<div class="pricetag-right"></div>
	</div>

ligger bredvid varandra som det ska.

[Althalos]

hm.. fattar ingenting O_o

Jag tror inte att jag har glömt någon relevant kod, men jag använder 960 grid system så det kan finnas kod jag inte har koll på. Jag ville egentligen inte visa upp sidan i det här stadiet, men jag låter den ligga upp en stund och ser om någon kan lösa detta.

http://www.cekdahl.com/awesome/product.html

Jag kollar på sidan i Firefox.

[gfors]

Ursprungligen postat av Althalos

hm.. fattar ingenting O_o

Jag tror inte att jag har glömt någon relevant kod, men jag använder 960 grid system så det kan finnas kod jag inte har koll på. Jag ville egentligen inte visa upp sidan i det här stadiet, men jag låter den ligga upp en stund och ser om någon kan lösa detta.

http://www.cekdahl.com/awesome/product.html

Jag kollar på sidan i Firefox.

Verkar vara din ovanliggande table som sabbar. Flyttar du hela pricetag diven några pixlar till vänster och floatar alla under-divvar mot varandra så löser det sig.

Problemet är att högra div:en av bakgrunden stöter på tabellens högra kant och därför hoppar till nästa rad.

.pricetag 
{
	position: absolute;
	top: 200px;
	left: 398px;
	height: 50px;
}
.pricetag div {
	float: left;
	height: 50px;
}
.pricetag-left
{
	background: transparent url(../images/pricetag.png) no-repeat 0 0;
	width: 60px;
}
.pricetag-middle
{
	background:url("../images/pricetagbg.png") repeat-x scroll left top transparent;
	font-family:Calibri;
	font-size:3em;
	font-weight:bold;
	text-indent:0;
}
.pricetag-right
{
	background: transparent url(../images/pricetag.png) no-repeat -140px 0;
	width: 10px;
}

[Althalos]

Tack så mycket, nu fungerar det perfekt.