Float Problem

[zubl]

Hallo zusammen,

ich habe ein Problem mit dem floaten von DIVs:

CODE HTML:

   <div id="content">
    	<h1>Dekoration</h1>
      <div class="produkt">
        	<h1>Terrassen Vasen</h1>

        <h2>xystus olaris</h2>
        <img src="gfx/testbild1.jpg" width="247" height="167" alt="" />
        <p>Hier und da und sonst wo - sowie hier und da und sonstwo- sowie hier und da und sonstwo- sowie hier und da und sonstwo- sowie hier und da und sonstwo- sowie hier und...</p>
        <div class="mehr"><a href="#"><strong>riskier'</strong> einen blick</a></div>
        </div>
      <div class="produkt">

        	<h1>blumenkübel</h1>
        <h2>flora cubus</h2>
        <img src="gfx/testbild2.jpg" width="247" height="167" alt="" />
        <p>Hier und da und sonst wo - sowie hier und da und sonstwo- sowie hier und da und sonstwo- sowie hier und da und sonstwo- sowie hier und da und sonstwo- sowie hier und...</p>
        <div class="mehr"><a href="#"><strong>riskier'</strong> einen blick</a></div>
        </div>

      <div class="produkt">
        	<h1>statue</h1>
        <h2>statura</h2>
        <img src="gfx/testbild3.jpg" width="247" height="222" alt="" />
        <p>Hier und da und sonst wo - sowie hier und da und sonstwo- sowie hier und da und sonstwo- sowie hier und da und sonstwo- sowie hier und da und sonstwo- sowie hier und...</p>
        <div class="mehr"><a href="#"><strong>riskier'</strong> einen blick</a></div>

        </div>
        <div class="produkt">
        	<h1>Kuben</h1>
        <h2>cubus</h2>
        <img src="gfx/testbild4.jpg" width="247" height="222" alt="" />
        <p>Hier und da und sonst wo - sowie hier und da und sonstwo- sowie hier und da und sonstwo- sowie hier und da und sonstwo- sowie hier und da und sonstwo- sowie hier und...</p>
        <div class="mehr"><a href="#"><strong>riskier'</strong> einen blick</a></div>

        </div>
    </div>

CSS:

#content {
	width: 810px;
	height: auto;
	margin-top: 5px;
	padding: 30px 30px 30px 30px;
	background-color: #FFF;
	float: left;
	overflow-x: hidden;
}

#content h1{
	font-family: "Helvetica Neue", Helvetica, Arial;
	font-size: 72px;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	text-transform: lowercase;
	color: #000;
	letter-spacing: -3px;
}

#content .produkt{
	width: 247px;
	display: inline;
	float: left;
	border-left: 1px solid #c9c9c9;
	border-right: 1px solid #c9c9c9;
	margin-left: -1px;
	padding: 10px 10px 10px 10px;
}

Anbei das Beispielbild!

Ich möchte nun dass sich die gelbe Box unter der Roten wiederfindet!

Vielleicht kann mir jemand helfen?

Gruß

[sejuma]

Cleare nach der grünen box, z.B. so:

<div style="clear: both;"><!--Clear-Div--></div>

Am besten bildest du dazu eine Klasse.

[boomer]

ist hierdas display:inline nicht für die katz?