Hintergrund von gefloatetem Element anpassen

[Elrontur]

Hallo allerseits,

ich bastel derzeit an einem neuen Webdesign für meine Webseite und bin auch fast fertig, habe aber ein Problem mit meinen Infoboxen! Ich habe diese in 2 Teile geteilt - Name und Beschreibung. So hab ich den Titel nach links gefloatet und der Inhalt steht halt rechts davon. Jedoch soll die Titelseite eine Hintergrundfarbe haben, welche aber nicht bis unten durchgeht, sondern nur so groß wie der Inhalt ist. Hat da jemand eine Lösung dafür?

Hier ein Bild von dem, was ich erreichen will:

Hier mein Code:

Spoiler: HTML

<div class="details">
  <div class="title"> <p>Titel</p> </div>
  <div class="inner">
    <p> <a class="lightbox" href="img/#/#.jpg"><img src="img/#/#.jpg" alt="Name" title="Name"></a> </p>
    <p> Hier eine ganz lange Beschreibung. Du musst echt das alles lesen, haha! </p>
    <p> <a class="button" href="#"><b>Hier anderswo anschauen</b></a> </p>
  </div>
</div>

Spoiler: CSS

.details {
  margin: 15px 0;
  border: 1px solid #202020;
}
.details .title {
  float: left;
  padding: 0 15px;
  width: 20%;
  background-color: #202020;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}
.details .inner {
  margin-left: 20%;
  padding: 0 15px 0 50px;
}
[...]

Grüße,
Elro

 

[Drago]

Probier mal

.details:after {
  content: "";
  clear: both;
  display: table;
}

und dann .title und .inner jeweils height: 100% müsste gehen wenn ich mich nicht irre, habs aber nicht probiert.

 

[Elrontur]

Probier mal

.details:after {
  content: "";
  clear: both;
  display: table;
}

und dann .title und .inner jeweils height: 100% müsste gehen wenn ich mich nicht irre, habs aber nicht probiert.

Nee, das hat leider nicht funktioniert!
Aber dieser Code hier für einen Clearfix ist etwas besser:
(braucht ja auch kein "display: table"...)

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