Border do not cover image

Question

Can anyone help me to bordered cover the image?

It only follow the text. If my text is longer, then the border is resize with the text

Here my is html code

<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>

Here is my css

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

Answer 1

You need to clear floated image. The simples way to do it is by applying overflow rule to container:

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

Answer 2

Instead of using overflow property, try clearing the float of the :after of #guitar because overflow sometimes adds excess space in your box.

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

#guitar:after {
    clear: both;
}