Hintergrundfarbe in zweispaltigem DIV's

Dylan · #1 (**permalink**) 08.04.2008, 08:57

Ich habe mehrere zweispaltige DIV's mit unterschiedlichen Inhalten produkt_links / produkt_rechts:

<div class="produkt">
<div class="produkt_links"><img src="grafik.gif" width="180" height="44"><br>
</div>
<div class="produkt_rechts">
<strong>Produkt</strong><br><br>
Lorem Ipsum ...
</div>
<div style="clear:both;"></div>
</div>

.produkt {width:480px;line-height:1.6em;border:#B7B7C8 1px solid;}
.produkt_links {float:left;width:180px;font-weight:bold;padding:7px;background-color:#FFF;}
.produkt_rechts {float:left;width:270px;padding:8px 0px 8px 14px;border-left:#E2E2EE 1px solid;background-color:#F5F5FA;}

Das Problem ist, dass die Hintergrundfarbe + border sich in der Höhe nur über die Höhe des div-Inhaltes erstreckt. Ich möchte gern, dass sich die border + background-color immer auf die Gesamthöhe des <div class="produkt"> durchzieht.

Wie löse ich das?

cgdesign · #2 (**permalink**) 08.04.2008, 10:35

Ich verstehe leider dein Problem nicht. Welche Gesamthöhe von <div class="produkt"> meinst du denn? Die Höhe passt sich ja jetzt dem "produkt_rechts" an und da wird auch die Hintergrundfarbe schön dargestellt. Willst du für das gesamte DIV "produkt" etwa diese Hintergrundfarbe haben?

Dylan · #3 (**permalink**) 08.04.2008, 11:16

Zitat:

Das Problem ist, dass die Hintergrundfarbe + border sich in der Höhe nur über die Höhe des div-Inhaltes erstreckt. Ich möchte gern, dass sich die border + background-color immer auf die Gesamthöhe des <div class="produkt"> durchzieht.

Sorry, mein beigefügter Quelltext hat das Problem nicht wirklich gut dargestellt. Ich denke, so wird es deutlicher, wenn die Grafik z.B. 100px hoch wäre:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="content-language" content="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<style type="text/css">
.produkt {width:480px;line-height:1.6em;border:#B7B7C8 1px solid;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:0.8em;}
.produkt_links {float:left;width:180px;font-weight:bold;padding:7px;background-color:#FFF;}
.produkt_rechts {float:left;width:270px;padding:8px 0px 8px 14px;border-left:#B7B7C8 1px solid;background-color:#F5F5FA;}
</style>
</head>
<body>
    <div class="produkt">
        <div class="produkt_links"><img src="grafik.gif" width="180" height="100"><br>
        </div>
            <div class="produkt_rechts">
            <strong>Produkt</strong><br><br>
            Lorem Ipsum ...
            </div>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

imafox · #4 (**permalink**) 08.04.2008, 12:24

Schon mal mit "height:100%;" probiert?

cgdesign · #5 (**permalink**) 08.04.2008, 12:58

Zitat:

Zitat von imafox

Schon mal mit "height:100%;" probiert?

Würde nicht funktionieren. Aber in der FAQ Punkt 1 wäre interessant für ihn.

imafox · #6 (**permalink**) 08.04.2008, 13:41

Hm, hatte da etwas mit

Code:

body, html {height:100%;}

im Kopf, aber stimmt schon: Elegant ist anders.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
n Div's in eine Zeile	Mustangore	CSS	9	20.08.2009 15:19
Höhenanpassung von divs	localex	CSS	1	21.11.2007 11:25
Divs nebeneinander, aber mittig	RomanM	CSS	2	24.10.2007 06:32
Hintergrundfarbe eines aktivierten Links	fidel	CSS	5	15.06.2006 02:18
div's mit einer Hintergrundfarbe werden nicht gedruckt?	new user	CSS	2	25.03.2004 16:33