Preisliste erstellen (mit divs und css)

[Megaleecher]

Hi Leute,

Ich würde gerne eine Preisliste erstellen, habe dabei aber ein paar Problemchen...

Der HTML-Markup sieht folgendermaßen aus (Zumindest ein Eintrag davon.):

<ul class="pricelist">
	<li>
		<div class="nr" style="color: #03396B; font-size:10;"> 
			12345
		</div> 
		<div class="content"> 
			<div class="name" style="color: #03396B; font-size:10;"> 
				Testartikel 1
			</div> 
			<div class="point"></div> 
			<div class="clear"></div> 
			<div class="desc" style="color: #000000; font-size:8;"> 
				Das ist ein Testartikel zur Preisliste Test.
			</div> 
		</div> 
		<div class="currency" style="color: #03396B; font-size:10;"> 
			EUR
		</div> 
		<div class="price" style="color: #03396B; font-size:10;"> 
			19,90
		</div> 
		<div class="unit" style="color: #03396B; font-size:10;"> 
			Stück
		</div> 
		<div class="clear"></div> 
	</li>
</ul>

Und der CSS-Teil sieht folgendermaßen aus:

.pricelist { list-style: none; padding: 0px; margin: 0px;}
.pricelist li { width: 100%; margin: 3px 0;}
.pricelist .nr { float: left; margin: 0 2px; }
.pricelist .content { float: left; margin: 0 2px; left:0px; right: 0px; }
.pricelist .name { float: left; }
.pricelist .point { float: left; }
.pricelist .desc {  }
.pricelist .unit { float: right; margin: 0 2px; }
.pricelist .price { float: right; margin: 0 2px; }
.pricelist .currency { float: right; margin: 0 2px;}

Soweit funktioniert der Code auch.
Hier mal ein kleiner Screenshot davon:

Wenn nun aber der Inhalt in .pricelist .content .desc mehr wird als in eine Zeile passt, dann wird der container .content auf die gesamte verfügbare Breit gestreckt und das float:left ist wirkungslos. (Siehe im nächsten Screenshot)

Was kann ich nun machen, damit die linke "Spalte" und die rechten "Spalten" oben bleiben und der Container .content nicht breiter wird, als er tatsächlich an Platz zu Verfügung hat?!
Das Problem ist, dass ich leider nicht sagen kann, wie groß die rechten und linken "Spalten" sein werden....

Hier noch ein kleiner Screenshot mit der Umrandung von Webdeveloper im Firefox.

Wäre toll, wenn mir jemand helfen könnte, damit das richtig funktioniert.

MfG Megaleecher

 

[_Thor_]

Sieht für mich nach tabellarischen Daten aus, dann wäre ein Tabelle das richtige Element.

Deine Liste ist in der Form, wie du sie verwendest unsinnig. Wenn du es als Liste ansiehst, hast du mehrere Listenelemente, jeder Artikel ein Listenelement.

Hier kannst du aber getrost eine Tabelle verwenden.

 

[Megaleecher]

Du hattest recht. Hier eine Tabelle zu verwenden ist wirklich besser.
Ich hatte zwar vorher auch eine, die machte aber im IE Probleme also hab ichs mal so versucht. da sah sie zwar überall gleich aus, aber das mit der Breite konnte ich nicht in den Griff bekommen.
Jetzt hab ichs wieder mit einer Tabelle gemacht und siehe da, es geht in allen Browsern^^

Danke für die Hilfe.

MfG Megaleecher