Chi Shen Chi Shen - 22 days ago 6
CSS Question

Border do not cover image

enter image description here

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

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 */
}
Comments