CODEWITHSUNDEEP
htmlcssimagetextborder
Anton Putov
Anton Putov

Reputation: 1981

image and text in div with border

Here is the code:

   <div  style="border-style:solid; border-color:aqua; border-width:1px;">

       <img src="some picture" align="left" /> 
       <div>
            <span >SOME TEXT</span></br>
            <span >SOME TEXT</span></br>
            <span >SOME TEXT</span>
       </div>  

   </div>

The span block takes less (vertical) space then image and so the border and image overlaps and the image is partly out of the div span. Here is jsFiddle

How to apply border to out div?

Upvotes: 0

Views: 12406

Answers (3)

banana
banana

Reputation: 1206

Add overflow:auto to the first div style.

Upvotes: 3

user1976613
user1976613

Reputation:

if this http://jsfiddle.net/vleran/aTDYL/8/ is what you are trying to do than just add <div style="clear:both;"></div> before closing tag of the outer div (the parent div).

Upvotes: 2

Панайот Толев
Панайот Толев

Reputation: 6607

You should clear the image and the div with spans adding : <div style="clear:both"></div> in the end.

<div  style="border-style:solid; border-color:aqua; border-width:3px;">

           <img id="image_HDDimageControl" src="http://stereo-ssc.nascom.nasa.gov/beacon/t0193.jpg" align="left"> 
           <div>
             <span >SOME TEXT</span ></br>
             <span >SOME TEXT</span ></br>
             <span >SOME TEXT</span >
           </div>  

<div style="clear:both"></div>

Upvotes: 3

Related Questions