✔ Mehrere DIV mit Icon links, Beschreibung rechts

[cocoon]

Ich verzweifele gerade an einem Layout für einen Blog: Das Basislayout besteht aus einem Header, einer Sidebar links und dem Hauptbereich rechts. Nun sollen in der Sidebar mehrere Elemente untereinander plaziert werden, jedes Element ein kleines Bild links und ein Text daneben:

[----------------------------------------------- Page Container -----------------------------------------------]
[---------------- Sidebar ----------------] [------------------------------ Main ------------------------------]
----------
|        |     Hier steht dann Text
| Icon 1 |     als Beschreibung des
|        |     kleines Icons und
----------     wenn der Text zu lang
               ist soll er bündig weiter-
               laufen.
                
----------
|        |     Hier steht dann Text
| Icon 2 |     als Beschreibung des
|        |     kleines Icons und
----------     wenn der Text zu lang
               ist soll er bündig weiter-
               laufen.

                
----------
|        |     Hier steht dann Text
| Icon 3 |     als Beschreibung des
|        |     kleines Icons und
----------     wenn der Text zu lang
               ist soll er bündig weiter-
               laufen.

Kann jemand helfen, wie ich dieses DIV-Layout erzeuge? Mein Versuch soweit:

<div class="sidebarItem">
     <div class="sidebarItem_icon">
          <a ...><img ... /></a>
     </div>
     <div class="sidebarItem_desc">
          Hier steht dann Text als Beschreibung...
     </div>
</div>

.sidebarItem{
display:block;
margin-bottom:10px;  /* für den Abstand zwischen den Elementen*/
}

.sidebarItem_icon {
width:95px;
float: left;
clear: both;
}

.sidebarItem_desc {
float: right;
width:195px;
margin-right:10px; /* für den Abstand zum Sidebar-Rand*/
}

Es wird - trotz margin-bottom - kein Abstand zwischen den einzelnen sidebarItem Elementen erzeugt. Wenn ich testweise einen Rand setze oder mit Firebug suche, sehe ich, dass (obwohl die beiden icon- und desc-DIVs korrekt in dem sidebarItem DIV liegen) das sidebarItem DIV nur ein klitzekleiner Balken ist.

 

[Maik]

Moin,

du hast es versäumt, das Floaten innerhalb von .sidebarItem zu "clearen", was die erwähnten Fehldarstellungen zur Folge hat.

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

<div class="sidebarItem clearfix">
     <div class="sidebarItem_icon">
          <a ...><img ... /></a>
     </div>
     <div class="sidebarItem_desc">
          Hier steht dann Text als Beschreibung...
     </div>
</div>

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

mfg Maik

 

[cocoon]

Klasse, funktioniert einwandfrei, dank Dir vielmals!