By employing the pseudo selector ::after, one can enhance the design

Trying to align 2 images next to each other, I am floating one left and the other right with the intention of clearing the float using the ::after pseudo selector.

The surrounding text is expected to flow in between the images.

I often struggle with making the ::after selector work properly. Any tips or recommendations would be highly valued.

EDIT: Realized I forgot to include the ::after code

CSS

div#product > img:first-child {
    float: left; 
    margin-left: 55px;
    margin-bottom: 20px;
}
#product img {
    float: right; 
    margin-right: 55px;
    margin-bottom: 20px;
}
img::after {
    clear:both;
}

HTML

<div id="product">
            <img src="#" width="240" >
            <img src="#" width="240" >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>

Thank you.

htmlcss

Answer №1

img:before {
    content: ' ';
    display: inline-block;
    clear: both;
}

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

Node.js user attempting to upload and handle files without any external libraries, solely relying on traditional JavaScript and HTML techniques

Previously, my Node.js code seamlessly integrated with any javascript+HTML project I worked on, leading me to believe there was a direct correlation between Node.js and vanilla Javascript+HTML. However, this misconception was shattered when attempting to u ...

javascripthtmlnode.jsfileupload

Capturing HTML elements based on their class names using regular expressions

In my Python script, I am attempting to extract both the element and class names for all elements within an HTML file. So far, I have successfully retrieved all class names using the code snippet below. This method is crucial as I will be processing numero ...

pythonhtmlregex

Issue with the MUI Autocomplete display in my form

Recently, I started using Material UI and Tailwind CSS for my project. However, I encountered an issue with the Autocomplete component where the input overlaps with the following DatePicker when there is multiple data in the Autocomplete. I have attached a ...

csstypescriptnext.jsmaterial-uitailwind-css

I am in search of a regular expression to validate a Jordanian phone number, whether it includes the country code or not

Looking for a regex pattern that can validate phone numbers beginning with either 0096279, 0096278, 0096277, or 079, 078, 077. ...

javascripthtml

What is the proper way to add comments within CSS code inline?

Can anyone provide instructions on how to comment an inline css property, such as height, in the following code snippet? <div style="width:100%; height:30%;"> Any help is appreciated. Thank you! ...

csscomments

Element Style Does Not Align with Computed Z-Index

Currently, I am in the process of developing an HTML5 video player. However, I have encountered a problem where my custom controls become unclickable once the video element is set to fullscreen mode. This issue arises because the video's z-index is se ...

htmlcsshtml5-video

I utilized Bootstrap to validate the form, however, despite the validation, the form is still able to be submitted. What steps can I take to

I have implemented form validation using Bootstrap's 'needs-validation'. However, I am facing an issue where the form still gets submitted even when the validation fails. What I want is for the form submission to be prevented if the validati ...

javascriptjqueryhtmljinja2

Issues encountered when using Vue Transition in conjunction with v-autocomplete

Attempting to conditionally display or hide a selection text field using Vue's Transition feature, but experiencing an issue where the text field appears and disappears without any transition effect. <template> <Transition v-if="is ...

cssvue.jsvuejs3vuetify.js

Unable to extract certain features from Zillow's website

My current project involves extracting data from the Zillow website. For example, check out this link: I've encountered an issue while attempting to scrape the price and tax history sections. It seems that these elements are loaded using JavaScript ...

pythonhtmlseleniumbeautifulsoupscreen-scraping

Ensuring Uniform Column Height in Bootstrap 4 - Preventing Buttons from Being Forced to the Bottom of

Using the Bootstrap 4 class 'h-100' to ensure equal height for all three columns, I encountered an issue where the buttons that were initially aligned to the bottom of each div are no longer in correct alignment. How can I maintain button alignme ...

htmltwitter-bootstrapcssbootstrap-4

What is the best way to trigger a function once another one has finished executing?

After opening the modal, I am creating some functions. The RefreshBirths() function requires the motherId and fatherId which are obtained from the getDictionaryMother() and getDictionaryFather() functions (these display my mothers and fathers on the page s ...

javascripthtmljqueryajaxbootstrap-5

The phenomenon of IE6 Float Drop

Having a bit of trouble with IE6; typically I'd just drop support for it, but there's a chance that many visitors will be using it on this project. If you have IE6 and want to see the issue, check out my Home Page link. The problem is that div#c ...

cssinternet-explorer-6

When using JavaScript, I have noticed that my incremental pattern is 1, 3, 6, and 10

I am currently using a file upload script known as Simple Photo Manager. Whenever I upload multiple images and wish to delete some of them, I find myself in need of creating a variable called numDeleted (which basically represents the number of images dele ...

javascriptjqueryhtml

After attempting to refresh the webpage with the F5 key, I noticed that the jQuery progress bar was not functioning properly. Additionally, the webpage failed to display any

Trying to implement a web loading bar using jQuery on my website was initially successful, but I encountered an issue when reloading the page with F5. The progress bar would not work and the webpage displayed only a white background. Below is the code snip ...

javascripthtmljquerycss

Modify the standard placement of choices in MUI

Currently, my UI is powered by MUI. I have various options displayed in the image below: Everything looks good so far. However, I wish to reposition the options container further down. (It is currently set at top: 64px which is the default). I aim ...

cssmaterial-uimakestyles

The ideal method for eliminating a targeted border in HTML

I need to make a table more visually attractive by removing specific borders without affecting the overall design. After applying the border-collapse property, I attempted to remove the right border from certain cells using CSS. However, this unintentional ...

htmlcsshtml-table

Firefox Misplacement: Erroneously Shifting Element Locations

I have recently completed designing and developing a new website, which you can visit here. However, I am currently facing an issue with the positioning of the "About Us" image when accessing the site on either a tablet or a mobile device. Strangely enou ...

htmlcssfirefoxtwitter-bootstrap-3

What is the best way to transfer variables to a different page through a pop-up window?

I'm working with a function that converts the Id of the clicked element into a variable, then opens a new window with a different page. How can I access or utilize this variable on the newly opened page? var idToWrite = []; $(function(){ $(".szl ...

javascriptjqueryhtml

Guide to creating a contenteditable div that automatically generates smart quotes instead of traditional dumb quotes

I've observed that when I write in Google Docs, I get smart quotes. However, when I create contenteditable divs on my own, I only see dumb quotes. Is there a way to make my contenteditable divs display smart quotes instead of dumb quotes? ...

javascripthtmlcss

Icon Searchbar Feature in Ionic 2

I am currently working with Ionic2 and have integrated the ion-searchbar component into my project: https://i.sstatic.net/CqmF4.png Question Would it be possible to customize the search icon? The default icon is a magnifying glass, but I would like to r ...

javascripthtmlcssangularionic2