LaVOZs

The World’s Largest Online Community for Developers

'; html - Adding float-left class (Bootstrap 4) to div negates <a><img></a> link - LavOzs.Com

Weird situation... this code results in a picture and the related text BELOW it. Importantly, the picture is properly clickable, the text wrapping is not what I want (see below):

            <div class="col-md text-center " style="margin-top:15px;">
                <h3>Heading</h3>
            </div>

            <div class="col-md" style="margin-top:15px;">

                <div class="col-xs-5 nopad">
                    <a href="{link to external website}"><img src="images/picture.jpg"  style="max-height: 145px; margin-right: 15px; margin-bottom: 5px; "></a>

                </div>

                <div class="col nopad" style="width:100%;">
                    Lorem impsum, etc..........
                </div>

            </div>
        </div>
    </div>
</section>

My goal is to have the text wrap to the right and bottom of the photo and still have the img clickable. When I add "float-left" to the before the tag, the image is no longer clickable. This is the code that doesn't work:

            <div class="col-md" style="margin-top:15px;">

                //LINE BELOW CONTAINS FLOAT-LEFT
                <div class="col-xs-5 nopad float-left">
                    <a href="{link to external website}"><img src="images/picture.jpg"  style="max-height: 145px; margin-right: 15px; margin-bottom: 5px; "></a>

                </div>

                <div class="col nopad" style="width:100%;">
                    Lorem impsum, etc..........
                </div>

            </div>

I have searched with no luck. I have rearranged code and no luck. The presence or absence of the float-left seems to clearly be the source of the problem.

If I got it good you want to have clickable image on the left and text wrapped around it on right and bottom. Here is what works for me

<div id="container">
    <div id="floated">
      <a href="#"> <img src="https://dummyimage.com/600x400/000/fff"> </a>
  </div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of
</div>
#container{
    width: 100%;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

#floated img {
  width: 100%;
}

I have put px on elements width but it will work with % too..

Hope it helps

Happy Coding

Related
How do I get a div to float to the bottom of its container?
Make a div into a link
CSS wrapping text around image in non-floated div container
CSS - Expand float child DIV height to parent's height
How repeat background image in div longer then page length?
Bootstrap NavBar with left, center or right aligned items
Do two inline divs need to have floats?
Cannot display HTML string
Aligning text with floated img