✔ Background-Größenproblem bei float-Angaben

[Thomas D]

Hallo!

Ich habe ein CSS-DIV-Layout, bei dem ua. ein Content-DIV über einem Background-DIV gelegt wird. Das Background-DIV hat einen roten, das Content-DIV einen weißen Hintergrund. Das funktioniert auch alles wunderbar, bis auf den Fall, bei dem ich SPAN-Elemente mit Float-Charakteristik einfüge. Hier wird dann der Content-Bereich nicht ensprechend vergrößert: http://www.thomasd.info/temp/BackgroundProblem.jpg

Meine CSS-Defintion sieht wie folgt aus:

#produktElement
{
	height: 170px;
	width: 120px;
	float: left;
	overflow: visible;
	margin-bottom: 0.1cm;
}

In HTML wird's wie folgt eingebunden:

<div>
<span id="produktElement">
    <a href="index.php?content=produkte&ebene=1&obj[]=1">
        <p>Flyer ungefalzt</p>    
        <img src="res/products/flyer.gif" />
        <p class="info"></p>
    </a>
</span>
    <span id="produktElement">

    <a href="index.php?content=produkte&ebene=1&obj[]=2">
        <p>Flyer gefalzt</p>    
        <img src="res/products/flyergefalzt.gif" />
        <p class="info"></p>
    </a>
</span>
    <span id="produktElement">
    <a href="index.php?content=produkte&ebene=1&obj[]=3">
        <p>Plakate</p>    
        <img src="res/products/plakate.gif" />

        <p class="info"></p>
    </a>
</span>
...
</div>

Wie kriege ich es nun hin, dass der Background automatisch mit an die Größe angepasst wird? Denn das float-Element kann ich ja nicht weglassen, da ich im produktElement-SPAN-Block ja Zeilenumbrüche verwende.

 

[Maik]

Hi,

möglicherweise hilft dir da mein Artikel CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an? in den Webmaster FAQ weiter.

Übrigens muß eine ID im HTML-Dokumentenbaum eindeutig sein, darf darin also nicht mehrfach vergeben werden - für diesen Fall ist die Klasse .produktElement vorgesehen.

 

[Thomas D]

Dankesehr für die prompte Antwort ;-)!