Utilizing the float-left class in Bootstrap 4 on a div cancels out the link between <a><img></a> elements

Strange scenario... when using this code, a picture appears with the related text BELOW it. It's crucial that the picture remains clickable, but the text isn't wrapping as desired (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>

The objective is to have the text wrap around the right and bottom of the photo while keeping the image clickable. Adding "float-left" before the <div> tag causes the image to lose its clickable functionality. Here's the code snippet that creates this issue:

            <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've tried various solutions without success. Rearranging the code hasn't helped either. The presence or absence of "float-left" seems to be causing the issue.

htmlcssimagelayoutbootstrap-4

Answer №1

If you're looking to create a layout with a clickable image on the left and text wrapping around it on the right and bottom, here's a solution that has worked well 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 specified px for the elements' widths, but using % will work as well.

I hope this solution proves helpful for your project!

Keep coding happily!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The printed Bootstrap web page is being truncated

I have a unique dynamic webpage created with Bootstrap that needs to be printable. I am implementing media queries for styling the page when printing: /** Custom Print Styles **/ @media print { header, .menu, footer { display: none; ...

jqueryhtmltwitter-bootstrapcss

Unable to eliminate blue highlighting in Chrome when an element is in focus

After clicking on the search button, there seems to be a persistent blue outline that CSS is not correctly removing despite the settings I've applied. Here is the CSS code I have used: input:focus { -webkit-tap-highlight-color: rgba(0,0,0,0); outl ...

htmlcss

Attach a tab-icon to a picture

I am looking to add a tab to the bottom border of an image within a gallery. This tab needs to be right up against the image border with no space in between. When clicked, this tab should activate a small JavaScript function that will display the content ...

javascripthtmlcsstabsimage

Filling out a Form in Advance

I'm having trouble populating a form in a new window using JQuery. The new window opens as expected, but I can't get the form to populate successfully. $( "body" ).delegate( ".propose", "click",function() { var url = './prop_form.php& ...

jqueryhtmlforms

What is the most effective method to horizontally center a div element when its width and height are not predetermined

Let's say there is a div element on the page like this: <div class="center"></div> The CSS style for this div may look something like this: .center{ background:red; position:absolute; left:50%; top:50%; margin-left: ...

htmlcsscss-expressions

Conceal the browser scrollbars

When I have two DIVs on my webpage that are larger than a browser window, it results in a horizontal scrollbar being displayed. How can I hide this browser scrollbar for the first DIV while still showing it for the second one? For example, if I have two ...

htmlcssscrollbar

Countdown Timer App using Flask

I'm currently working on a Flask-based game that involves countdown timers for each round. My goal is to have the timer decrease by 1 second every round without the need to reload the page. I've tried using time.sleep in my Python code to update ...

javascriptpythonhtmlflaskjsonify

Utilizing ng-if within ng-repeat for dynamically generated option tags in HTML and AngularJS

I am using AngularJS to create a dropdown menu with select and option tags. The menu is referencing a model and looks like this: <select id="edit-location" class="" ng-model="packageLoc"> <option ng-repeat="x in loc" value="{{ x.locationId }} ...

javascripthtmlangularjsangularjs-ng-repeatangular-ng-if

What could be the reason for the Bootstrap 3 row not expanding to accommodate the content?

I am working with the following HTML structure: <div class="container-fluid"> <div class="row"> <div class="col-sm-push-3 col-sm-6 text-center wrapper"> <div class="col-sm-4 inner-wrapper"> & ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

File not being successfully sent through form submission using Jquery

I have created a form setup like this: <label for="pdffile">Please Upload File</label> <form class="form-horizontal" role="form" method="POST" name="upload" id="upload" enctype="multipart/form-data"> {{ csrf_fi ...

phpjqueryhtmllaravel

Is there a quick way to import all available font weights from a Google font?

I am looking to experiment with importing all weights and styles of a Google font, such as Roboto or Roboto Slab, in a CSS file. Is there a more efficient way to do this rather than listing out each individual style in the @import? ...

cssgoogle-fonts

Refreshing the lightbox once new ajax content is loaded

While there are similar questions and answers related to my issue, I have not been able to apply them successfully. As a beginner in this area, any assistance is greatly appreciated. I am currently working with CubePortfolio, which is a jQuery-based, filt ...

javascriptjqueryhtmlajax

The Perfect Scrollbar feature is not functioning properly in conjunction with the accordion menu

I am having some trouble with implementing the Perfect Scrollbar alongside an accordion slider menu. The scrollbar is not working as expected, and you can view the fiddle here. On initial page load, the scrollbar only appears for the first sub-menu aft ...

javascriptjqueryhtmlcssaccordion

I need to implement a div-based dropdown with a scrollbar in JavaScript and CSS to prevent it from extending beyond the screen. Additionally, the use of struts is essential in this implementation

Dealing with a dynamically populated div-based dropdown can be tricky, especially when it extends beyond the screen's limits and hides entries. This is an inherited application that lacks support, leaving me to handle it without the necessary expertis ...

javascriptjqueryhtmlcss

What are the steps to configure or reach a page located in a subdirectory of a different project within a Laravel/OctoberCMS website

I have developed a website using an OctoberCMS theme, hosted on a DigitalOcean server. I am looking to integrate a separate project (specifically the code from Matomo analytics) onto the same server and create a public page that can be accessed at my_site. ...

phphtmllaraveloctobercmsmatomo

Removing a picture from the image directory using PHP

I'm currently working on a basic blog project where I need to delete posts from the database. However, I am facing a challenge when it comes to deleting the images associated with those specific posts. I have managed to write code to delete the posts ...

phpimagedelete-file

Why isn't the selected option appearing first?

I have written a PHP code to display the specified div <div id="main_catsel"> <select id="maincat" > <option value="1">none</option> <option value="2">Computer</option> <option value="4">Refrigerator& ...

phphtml

Tips on how to ensure the navigation menu is the same size as its child elements in the navigation menu

I'm currently designing a navigation menu that includes a child navigation menu. My goal is to have the size of the main navigation menu match that of the child navigation menu. To achieve this, I've created three hyperlink tags followed by a di ...

htmlcss

How can I make a clickable button or link within an anchor tag that is still able to be right-clicked?

Hey there, I'm currently working on a notification dropdown menu where each <li> contains a link or an <a> tag. I'm aiming to create something similar to Facebook's notification system. However, the challenge lies in trying to ...

javascriptcsstwitter-bootstrap-3drop-down-menuanchor

Tips for incorporating shapes and decorative elements into your page design effectively

I have searched everywhere on the internet but couldn't find an answer to this question. The question is simple: How can I add shapes or decorations to a page layout without causing it to look broken inside a responsive container? Click here to view ...

htmlcssbootstrap-5