Tips on preventing a header and body text from wrapping around a floated image positioned in the upper left corner

If we consider the layout order like this:

H3
<LEFT-FLOATED IMG> <text>
<H3>
<LEFT-FLOATED IMG> <text>

For smaller screen sizes, everything looks fine: https://i.sstatic.net/Dz0BB.png

But when the screen gets bigger, a problem arises: https://i.sstatic.net/uCxls.png

Here is the code snippet, using Bootstrap-4 for float-left, etc:

    <h3>Pigmentary variegation</h3>
        <img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pigmentary variegation.jpg" alt="pigmentary_variegation_example">
        <p>Text for pigmentary variegation</p>

   <h3>Pathological variegation</h3>
       <img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pathological_variegation.jpg" alt="mosaic virus">
       <p>Text for pathological variegation</p>

Is there a way to prevent text from wrapping around the left-floated image when it reaches the bottom of the H3 element?

htmlcssbootstrap-4

Answer №1

Include the property clear:both within your h3 element

h3 {clear:both;}

Answer №2

Enclose each segment within a div element set to display:block; as the default style:

<div>    
  <h3>Pigmentary variegation</h3>
  <img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pigmentary variegation.jpg" alt="pigmentary_variegation_example">
  <p>Text for pigmentary variegation</p>
</div>
<div>
  <h3>Pathological variegation</h3>
  <img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pathological_variegation.jpg" alt="mosaic virus">
  <p>Text for pathological variegation</p>
</div>

Answer №3

Alvaro's response provides a helpful solution, suggesting that in certain situations, it may be advantageous to envelop your code within a div element possessing the following class:

.clearfix::before, .clearfix::after {
    content: "";
    display: table;
    border-collapse: collapse;
}

Answer №4

There are two options to handle this.

Option 1: Utilize the "clearfix" property in your HTML code (along with some CSS) like so:

CSS:

.clearfix {
    clear: both;
}

HTML:

<h3>Pigmentary variegation</h3>
<img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pigmentary variegation.jpg" alt="pigmentary_variegation_example" />
<p>Text for pigmentary variegation</p>
<div class="clearfix"></div> <!--This is your clear code for clearing float gap. -->
<h3>Pathological variegation</h3>
<img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pathological_variegation.jpg" alt="mosaic virus" />
<p>Text for pathological variegation</p>

Option 2: Use "div" for your sections. Each section should have one parent div. Div creates a block with your section that has display block by default. Your code will look like this:

<div>
<h3>Pigmentary variegation</h3>
    <img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pigmentary variegation.jpg" alt="pigmentary_variegation_example" />
    <p>Text for pigmentary variegation</p>
</div>
<div>
    <h3>Pathological variegation</h3>
    <img class="img-fluid float-left mr-2 mb-0" src="../assets/image/articles/variegation/pathological_variegation.jpg" alt="mosaic virus" />
    <p>Text for pathological variegation</p>
</div>

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

Tips for showcasing a full body height background

I'm currently working on a project where I need to display random background images when the body loads. To achieve this, I've created a function. However, I'm facing an issue where the images are filling up the entire page, making it very l ...

javascripthtmlcssgoogle-chrome

Resolved navigation bar problems

As a beginner in web development, I am working hard to launch my first website. Today, I have a question for the stack overflow community regarding a fixed navbar issue. The navbar I have created is functioning properly on Chrome, but when it comes to Fire ...

phphtmlcssnavbarfixed

Achieving a smooth transition from a blur-out effect to a blur-in effect on a background Div

I created a blur in/out effect for my landing page, but it's not functioning as expected and I'm not sure why. It blurs out correctly, but the issue arises when I want the underlying Div to fade in. Currently, it just appears abruptly after the ...

javascripthtmlcss

Refreshing your web project with the newest and stylish Bootstrap and SASS upgrades

I have been working on an ASP .NET web project that includes jQuery, jQuery UI, and reset/normalize css stylesheets. The CSS code is not up to par, so I plan to revamp it with a budget allocated for the task :) During my research, I found two intriguing s ...

csstwitter-bootstrapsass

JavaScript's Math.round function does not always produce accurate results

After adding the specified line within the function, the code seems to encounter issues. parseLocalFloatCnt: num = Math.round(num*1.2); Is there a solution available for this problem? Your help is much appreciated. <!DOCTYPE html> <html> < ...

javascriptjqueryhtml

Grow an element starting from its center without being limited by the boundaries of a div

I'm faced with a puzzling issue that I believe has a simple solution, but it seems to be eluding me at the moment. Essentially, I have a div containing an image as its background. Upon clicking this div, I want another circular div (created using bord ...

jqueryhtmlcss

Chrome Automatically Playing WebRTC Audio

My webapp has webrtc functionality, but I've noticed a strange issue. When connections are established between Chrome browsers, the audio is not played, while video is. However, this problem doesn't occur with Mozilla users. So... Chrome user 1 ...

javascripthtmlgoogle-chromewebrtc

Is there a way to show new chat messages instantly without needing to refresh the entire page?

Creating a real-time chat application presents the challenge of displaying new messages instantly without requiring a page reload. Exploring different methods like reloading only the chat message container or treating new messages as individual chatMessage ...

javascriptpythonhtmlcssdjango

Align the text in the center of the button vertically

Struggling to vertically center text on a button? I understand the frustration! I've been working on this issue for a whole day with no success. My setup involves NEXT.js and TailwindCSS. <main> <div class='flex justify-center ite ...

cssreactjsnext.jstailwind-csscentering

What are the main differences between Fluid Layout and Grid?

It seems like there's some vital information I haven't come across yet. Are fluid layouts and grid layouts interchangeable? I keep hearing about this baseline concept, but I can't quite grasp its purpose. Does it serve as a guide for alignin ...

htmlcssfluid-layoutgrid-layoutbaseline

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

I'm currently facing an issue with two div elements on my webpage. I want only one of them to be visible at a time, depending on which key is pressed. If the 1 key is pressed, I want 'div1' to fadeIn (if it's not already visible) and fo ...

javascriptjqueryhtmlcss

How can I enable drag-and-drop functionality for my carousel?

I'm encountering an issue with my carousel. I utilized a bootstrap carousel template and added my own images for the slides. I included jQuery to make it draggable, along with the necessary CDN links. However, while it is now DRAGGABLE, it no longer c ...

htmljquerybootstrap-5

The combination of HTML, CSS, and vertical text margins is essential for creating visually

Looking for some guidance on how html text and margins work? If there's a good online reference you can point me to, I'd greatly appreciate it! I'm currently struggling with setting precise margins for text. In the example below, there&apos ...

htmlcsstextmargins

Is it possible to use multiple stylesheets with PhoneGap?

Currently, I am storing a stylesheet (CSS file) from the web server into device storage using the file system access method provided in the phonegap guide for File. I need to apply this stylesheet to my app from the device storage, and will be updating the ...

jquerycsscordovaphonegap-build

Is it possible for me to create a menu using the .row and .col classes from Bootstrap?

I attempted to create a menu using Bootstrap's cols. Something similar to this: https://i.stack.imgur.com/55xst.png However, I faced numerous challenges when trying to implement it into Wordpress and realized that it may not be the best approach... ...

htmlcssmenutwitter-bootstrap-3

The bootstrap carousel seems to be malfunctioning and instead displaying as background images

As someone who is new to coding, I have been attempting to create a slider on Bootstrap, but it seems to be displaying more like a background than an actual slider. Here is an excerpt of my HTML code: <body> <div class="navbar navbar-default ...

jqueryhtmlcsstwitter-bootstrapcarousel

toggle back and forth between two div elements

I am trying to create a toggle effect between two divs, where clicking on one will change its border and header color to red while the other div disappears. I have tried using an IF statement in my JavaScript code, but it is not working as expected. Can so ...

javascriptjqueryhtmlcss

Stack the <td> elements vertically rather than reducing the width of each <td> cell

I am currently using a standard HTML table to showcase data pulled from an API. <table style="width:100%"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td&g ...

htmlcss

IE7 is not applying the conditional CSS styles to content loaded through AJAX

I am currently tackling some challenges with IE7 compatibility in a Rails application that I am developing. It appears that CSS styles implemented from a stylesheet applied with a conditional comment are not being rendered properly when using HAML like thi ...

htmlcssajaxinternet-explorer-7

How can I replay an HTML audio element?

I created an HTML5 page with an audio element for playing music in mp3 format. However, when the music plays to the end, it stops and I'm using JavaScript to control the audio element. Even so, I can't seem to replay it, only stop it. Is there a ...

javascripthtmlhtml5-audio