The image refuses to align to the left side below a floated paragraph

Hey there, I'm working on some CSS and I've run into an issue. I have two paragraphs and I want to place a picture below the paragraph on the left side. The left paragraph is longer than the one on the right, which seems to be causing the picture to end up on the right side below the right paragraph. Can anyone provide some assistance with this problem?

body{
        font-family: sans-serif;
        margin:auto;
    }

    .p1 {
        width: 425px;
        float:left;
        padding: 2px 2px 2px 2px;
        border: 1px solid black;
        border-radius:5px;
        height:auto;
    }

    #dates img{
        float: left;
    }

    .p2 {
        width:405px;
        float:right;
        padding: 2px 2px 2px 2px;
        border: 1px solid black;
        border-radius: 5px;
    }

    .content    {
        width:850px;
        text-align:center;
        margin:auto;
    }

    h1  {
        text-align:center;
        margin-bottom:0px;
    }

    h3  {
        text-align:center;
        margin-top:0px;
    }

Answer №1

To ensure proper alignment, include the style rule clear: both; in the #dates img selector.

Check out this functional demo.

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

Creating a grid layout: Is there a way to instruct the renderer to disregard any additional tags in between

I have been setting up a grid layout with some divs, following this structure: CSS .grid { width: 300px; display: grid; grid-template-columns: 50% 50%; } HTML <div class="grid"> <div>First cell</div> <div>Second cell&l ...

How can I turn off shadows for every component?

Is it feasible to deactivate shadows and elevation on all components using a configuration setting? ...

Discovering elements through parent in Selenium

<div> <span>First line</span> <p>Second line</p> <span>Third line</span> <p>Fourth line</p> </div> My goal is to access the elements within the div tag using CSS or XPath selector ...

What is preventing me from translating an element using transform: translateY()?

I attempted to move the letter 'h' down by 40px on its own, but the translation only seems to work if I relocate the entire word. I also experimented with positioning 'h' absolutely relative to the parent element, but then 'ello&ap ...

Determine the outcome of the assessment quiz

Greetings everyone, I apologize for my poor English. I've been searching through numerous documents, but due to my language barrier, I am having trouble understanding them. I have designed a quiz page, but I'm facing an issue where I can't d ...

Troubleshooting a layoutUnit problem with Primefaces southern region

I'm encountering an issue with my PrimeFaces layout. The south layoutUnit is not displaying on the page, and I am unsure why. Below is the code for the page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/ ...

Tips on assigning a value to a dynamically generated drop-down element

I used arrays of strings to populate drop-down menus. Is there a way to automatically set the value of each option to match the text content? el.value = opt; seems to be ineffective. var validCoursesKeys = ['opt 1','opt 2','opt ...

What causes a webpage to overflow when using the position:absolute property?

Despite my understanding that an element positioned absolutely should be removed from the normal content flow, why does it still cause the page to overflow? Running the code snippet below reveals a horizontal scrollbar, which I didn't expect. .rela ...

When a form input is submitted, the webpage will refresh with a new

I have a form embedded on my WordPress page. I want to identify users without referrers so that I can set the referrer for them automatically (the referrer part is handled by a plugin). The registration form URL looks like this: The code provided below w ...

Seeking instructions on incorporating multiple components in a tab section effectively?

I am currently using a tab system that functions flawlessly. As I delve into learning VueJs, one concern has arisen in my mind about components and/or templates: Using the analogy of tab windows, how can I incorporate two components within a single tab, s ...

Using flexbox to evenly distribute images with borders and padding to ensure consistent height

Currently, I am utilizing jQuery to adjust the flex-grow value of a wrapper div based on the aspect ratio of a figure's image. This approach was suggested here. However, once I apply a border and padding to the figure, the images no longer retain the ...

HTML table containing radio buttons styled with Font Awesome icons

I'm having some trouble getting a radio button with Font Awesome to work properly within an HTML table. Outside of the table, it functions as expected, but inside the table, it only seems to hide/show between the two states without displaying the chec ...

Disable form input fields while keeping all other elements enabled

Currently, I am facing a dilemma where I must deactivate specific input fields within a form. Given that there are numerous fields to consider, individually disabling each one seems impractical. Can anyone offer advice on how to disable a set of elements ...

Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

Have you ever wondered if there's a way to make an icon act like a link when clicked, just like regular text links turning purple? And not just the last one clicked, but every single icon that gets clicked. Trying to use the :visited pseudo was unsucc ...

What is the best way to ensure that each link displays unique text in a separate div when clicked on?

<aside class="side_article_content"><p id="defaultText">Chakras are explained here.</p> <p id="baseChakraInfo" style="display:none;">Base Chakra details here.</p> <p id="sacralChakraInfo" style="display:none;">Sa ...

Clear backdrop with solid objects

I am trying to achieve a unique design where the body has an image background, and the main div has a semitransparent background. I want the image to be visible through the main div, but in a shaded manner. However, the traditional approach may cause every ...

Elegant Popup Form

I'm encountering a problem with my ajax form that is embedded within a bootstrap modal. On the first use, the form functions correctly. However, when I attempt to use it again without refreshing the page, the text area no longer appears within the mod ...

Create circles with a variety of different colors on the canvas

I need assistance with creating an animation where circles move from right to left on a canvas. The colors of the circles are randomly selected using a function. Currently, I have a fiddle where a single circle moves from right to left, changing color ever ...

Can you explain the meaning of this compound CSS selector?

.btnBlue.btnLtBlue Is this referring to an element that has both the classes btnBlue and btnLtBlue applied? ...

How to access a particular tab in Bootstrap 5 using an external link

Is there a way to direct users to a specific tab upon clicking a link on another page? Check out the example below: <div class="products-btn"> <a href="products.html#pills-profile">view all</a> </div> On Pro ...