Web Hintergrund von gefloatetem Element anpassen

Dieses Thema im Forum "Programmierung" wurde erstellt von Elrontur, 25. Juli 2015.

  1. Elrontur
    Offline

    Elrontur Ehem. Teammitglied

    Registriert seit:
    5. April 2013
    Beiträge:
    138
    Minecraft:
    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:
    [​IMG]

    Hier mein Code:
    Code (Text):
    1. <div class="details">
    2.   <div class="title"> <p>Titel</p> </div>
    3.   <div class="inner">
    4.     <p> <a class="lightbox" href="img/#/#.jpg"><img src="img/#/#.jpg" alt="Name" title="Name"></a> </p>
    5.     <p> Hier eine ganz lange Beschreibung. Du musst echt das alles lesen, haha! </p>
    6.     <p> <a class="button" href="#"><b>Hier anderswo anschauen</b></a> </p>
    7.   </div>
    8. </div>
    Code (Text):
    1. .details {
    2.   margin: 15px 0;
    3.   border: 1px solid #202020;
    4. }
    5. .details .title {
    6.   float: left;
    7.   padding: 0 15px;
    8.   width: 20%;
    9.   background-color: #202020;
    10.   color: #ffffff;
    11.   font-size: 16px;
    12.   font-weight: bold;
    13. }
    14. .details .inner {
    15.   margin-left: 20%;
    16.   padding: 0 15px 0 50px;
    17. }
    18. [...]

    Grüße,
    Elro
     
    #1
  2. Drago
    Offline

    Drago

    Registriert seit:
    2. April 2013
    Beiträge:
    83
    Ort:
    #LetsSee
    Probier mal

    Code (Text):
    1. .details:after {
    2.   content: "";
    3.   clear: both;
    4.   display: table;
    5. }
    und dann .title und .inner jeweils height: 100% müsste gehen wenn ich mich nicht irre, habs aber nicht probiert.
     
    #2
  3. Elrontur
    Offline

    Elrontur Ehem. Teammitglied

    Registriert seit:
    5. April 2013
    Beiträge:
    138
    Minecraft:
    Elrontur
    Nee, das hat leider nicht funktioniert!
    Aber dieser Code hier für einen Clearfix ist etwas besser:
    (braucht ja auch kein "display: table"...)
    Code (Text):
    1. .details:after {
    2.   clear: both;
    3.   content: "";
    4.   display: block;
    5.   font-size: 0;
    6.   height: 0;
    7.   visibility: hidden;
    8. }
     
    #3