Grenze nicht decken Bild

Question

Kann mir jemand helfen, um das Bild zu begrenzen?

Es folgen nur den Text. Wenn mein Text länger ist, dann ist die Grenze mit dem

Hier Text die Größe meiner HTML-Code ist

<div id = "guitar"> 

      <img src="christmas.jpg" alt="guitar" width="500" height="300" class="imgleft"> </img> 


        <h1>Guitar</h1> 

        Visit the three ghosts of Christmas this November as the PLAYHOUSE Whitley Bay kicks off the festive season with a fantastic Disney-esque musical production of A Christmas Carol. 


     </div> 

Hier ist mein css

#guitar { border : 5px solid; 
     padding : 10px; 
     margin-bottom : 2%; 
    } 
.imgleft{float:left;} 

Answer 1

Sie müssen schwebte Bild löschen. Der simples Weg, es zu tun ist durch die Überlauf-Regel Behälter Anwendung:

#guitar { 
    border : 5px solid; 
    padding : 10px; 
    margin-bottom : 2%; 
    overflow: auto; /* <--- this rule does the trick */ 
} 

Answer 2

Statt overflow Eigenschaft verwenden, versuchen Sie den Schwimmer der :after von #guitar Clearing weil overflow manchmal überschüssigen Raum in Ihrem Kasten hinzu.

#guitar:before, #guitar:after { 
    content: ''; 
    display: table; 
} 

#guitar:after { 
    clear: both; 
}