Ensure that any relevant information is placed adjacent to a floated image

I am currently designing a responsive webpage featuring images of people's faces placed next to descriptive text. At smaller screen widths, everything looks perfect. However, as the page widens, the text for one person starts next to the image of the previous person.

https://i.sstatic.net/tz2mJ.jpg

To address this issue, I need a way to ensure that the text aligns properly with the image it belongs to.

https://i.sstatic.net/phyMz.jpg

If you have any suggestions or solutions, please check out my JSFiddle here.

img {
  float: left;
  clear: both;
  margin: 0 20px 20px 0;
}
<img src="https://placehold.it/300x300">
<h1>First person's name</h1>
<p>A few paras of text.</p>
<img src="https://placehold.it/300x300">
<h1>Second person's name</h1>
<p>A few paras of text.</p>

Please note that using clear: both ensures that the images do not overlap in the layout.

EDIT: I am looking for a CSS-only solution without any additional markup to simplify content management for non-technical users using TinyMCE editor in our CMS.

htmlcssimagecss-float

Answer №1

To make sure the content clears after the p element, you can simply add the following code:

<div style="clear:both"></div>

Check out the demonstration below:

#container img {
  float: left;
  margin: 0 20px 20px 0;
}
<div id="container">
  <img src="https://placehold.it/360x360">
  <h1>
    First person's name
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
    Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
    rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
  </p>
  <div style="clear:both"></div>
  <img src="https://placehold.it/360x360">
  <h1>
    Second person's name
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
    Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
    rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
  </p>
</div>

If you're unable to change the markup, consider using a pseudo element for the p:

p:after {
    display: block;
    content: '';
    clear: both;
}

Take a look at the example below:

#container img {
  float: left;
  margin: 0 20px 20px 0;
}
p:after {
    display: block;
    content: '';
    clear: both;
}
<div id="container">
  <img src="https://placehold.it/360x360">
  <h1>
    First person's name
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
    Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
    rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
  </p>
  <img src="https://placehold.it/360x360">
  <h1>
    Second person's name
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
    Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
    rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
  </p>
</div>

Answer №2

Have you tried incorporating the Bootstrap column structure?

#container img {
 margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="container">
<div class="row">
  <div class="col-xs-6 col-sm-6">
    <img src="https://placehold.it/360x360">
  </div>
  <div class="col-xs-6 col-sm-6">
    <h1>First person's name</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in. Ut non...acet. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam ...
    </p>
  </div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-6">
    <img src="https://placehold.it/360x360">
  </div>
  <div class="col-xs-6 col-sm-6">
      <h1>Second person's name</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis moles...
    </p>
  </div>
</div>

Answer №3

Consider utilizing divs and employing the pseudo selector before and after for clear elements Check out the demo here

.top-content:after, .top-content:before {
   display: block;
   content: "";
   clear: both;
   margin-bottom: 30px;
}

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

Controlling HTML5 Video Playback with JavaScript: Pausing at Custom Frames

I need to implement a feature in my web application where I can pause an HTML5 video at specific frames using pure JavaScript, not based on minutes. <video id="media-video" controls> <source id="media-source" src="media/video.mp4" typ ...

javascripthtmlhtml5-video

"Challenges encountered while trying to format a table responsively with Bootstrap CSS

My objective is to display two tables side by side, with the right table overflowing horizontally. However, I am currently facing an issue where the second table is being pushed below the first one. Any assistance on resolving this problem would be highly ...

htmlbootstrap-5

Having trouble integrating SVG icons into my Angular project

I'm encountering an issue with adding icons that I've designed in Figma to my web application. Some of the icons are displaying correctly while others are not. Here is the code snippet I am using to add the icons: .dx-icon-info { mask-image: ...

htmlcssangularsvgicons

The expected behavior of first-child is not impacting the initial element as anticipated

What is the reason behind the rule not impacting the first div containing the "update 1" text? .update div { width:100%; height:25%; border-top:1px dashed {color:background title}; padding: 5px; color:{color:links nav}; cursor:po ...

csscss-selectors

In Internet Explorer, transitions do not always play correctly when using ng-animate and ng-if

I am facing an issue with a simple div that has a transition effect. It goes from a yellow background to a red one. <div class="bar" ng-class="{'bar-visible': vm.visible}"> The transition works smoothly when the bar-visible class is added ...

angularjscsscss-transitionsng-animate

CSS does not have the capability to style child elements

Having trouble changing the text for child elements when applying CSS classes to parent elements. Is there a specific reason why this is happening? Take a look at my current code: <Box //not affecting all child elements ...

cssreactjsmaterial-ui

Switch the header from left to right movement for mobile devices

I am dealing with two headers in my layout <section> <header class="col-lg-9"> <!-- some content --> </header> <header class="col-lg-3"> <!-- some content --> </header> </section ...

javascripthtmlcsstwitter-bootstrap

Element remains hidden when position set to relative

I have created a panel inside a container class. The panel's CSS is as follows: .panel { width: 100%; background: url(img/launch1.png); height: 80%; background-size: cover; background-position: center; position: relative; ...

htmlcss

Efficiently handling jumbled strings in Python: A guide to parsing

Looking to pull out ID numbers and their pass/fail status from an XML file, the data I have is messy and I'm new to Python. Specifically, I have a list of strings with the info and need to extract the codes and status. Currently, I'm struggling w ...

pythonhtmlstringlistbeautifulsoup

Switching from a layout of 3 columns to 2 columns on iPad when orientation is changed to portrait

Apologies for posting this inquiry here, but I am facing a challenge with an iPad issue when switching to portrait orientation on my website. I am using a @media query to detect the portrait view and I want to switch from three columns to two. However, th ...

cssipadorientation

Replacing the tbody element in React with centered text using inline styles ---If you want

I am working with an empty array in React that I translate into state. When the array is empty, I want to insert a text that says "no match events yet..." into a react-bootstrap Table's tbody. In the current setup, I am struggling to center the text ...

javascriptcssreactjsreact-bootstrapinline-styles

Struggling to remove the translucent effect when hovering over the share button

I have been struggling with a seemingly simple issue for a few hours now. On my website, I have some share buttons located at . Although I want these buttons to remain completely black when hovered over, they are inexplicably becoming slightly transparen ...

htmlcsshyperlinkhover

Finding and choosing a date from an ng-model datepicker using Selenium Webdriver - a guide

I am encountering an issue where I can open the date picker pop-up calendar with a click, but I cannot select a specific date from it. This is due to the input field being read-only, which means that any input provided through sendkeys or JavascriptExecuto ...

jqueryhtmlangularjsseleniumselenium-webdriver

When the form is submitted, use jQuery to smoothly transition the page to a specific

I have a form and a div called "success". When the form is submitted, the "success" div is displayed. I am attempting to make it so that when the form is submitted, the page slides to the "success" div. Here is the code I am using: $.ajax({ type: "P ...

javascriptjqueryhtmlajax

Is it achievable to use multi-level :not selectors in CSS / JS querySelector?

I have come across numerous tutorials explaining the use of multiple :not selectors on a single element. However, I have yet to find any examples of using :not selectors on different levels within a single CSS / JS querySelector path. For instance, conside ...

css

confirm that the form is necessary and contains text

How can I ensure that a specific text string is validated for the input field labeled "promo"? Take a look at the code snippet below: <script> function validateForm() { var x = document.forms["myInquiry"]["promo"].value; if (x == null || x == "") ...

javascriptphphtml

Change the border color of a form field in a material design if the user interacts with the

Is there a way to change the border color of a material form field in Angular when it is touched, focused, or active? I attempted to modify the color by overriding material css-class and also tried creating my own css class, but neither method had any ef ...

cssangular-material

Events Unavailable for Viewing - Full Calendar - Database Error Encountered

I am currently developing a calendar application. While I have managed to successfully display the calendar and add events, I am facing an issue with displaying events on the monthly view. Here is a snippet of the HTML code being used: <head> &l ...

phphtmlsqljson

An issue occurred while attempting to read words from JSON file

My current issue involves loading words from JSON into my webpage. The images are functioning properly, thankfully. I have already successfully loaded the necessary images through JSON onto my webpage. However, I am still in need of loading words through ...

javascriptjqueryhtmlcssjson

Define the total in a CSS attribute

I am working with multiple divs that have a specific CSS class applied to them. My goal is to manually increase the pixel value in the top property: .class { top: 100px; } div class="class" style="top:+=50px" Is it possible to achieve this functiona ...

css