I have organized two <h4>, <img>, and <p> tags into individual <div> elements. To prevent overlap, I floated the image and used <br> tags to create separation between the <div> elements. However, they still overlap despite these efforts

Arranging two h4, img, and p tags within separate <div> elements, I attempted to use float for the image and
tag for separation. However, they are still overlapping.

https://i.sstatic.net/SUxli.png Here is the image displaying the issue.

I'm new to this and seeking guidance. Any help would be greatly appreciated. Thank you.

img {
  width: 50%;
  height: auto;
  margin: 20px 10px 20px 0px;
  /* float: left; */
}

.service {
  margin: 20px auto 20px auto;
  text-align: left;
  line-height: 2;
}
    <div class="service">
    <h4>Lorem ipsum dolor sit amet</h4>
        <img src="image.jfif" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
      </div>
      <br>
      <div class="service">
        <h4>Lorem ipsum dolor sit amet</h4>
        <img src="image.jfif" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
      </div>

htmlcss

Answer №1

If you wrap your code in a container that is flexed with a column flex-direction, you can then place your <h4> tags before the service div and flex that div as well, but with a flex-direction: row; Check out the CSS modifications I made.

.container {
  display: flex;
  flex-direction: column;
}

p {
  padding: 10px;
  width: 500px;
  margin: auto;
}

img {
  width: 50%;
  height: auto;
}

.service {
  text-align: left;
  line-height: 2;
  display: flex;
  flex-direction: row;
}
<div class="container">
   <h4>Lorem ipsum dolor sit amet</h4>
   <div class="service">
      <img src="https://dummyimage.com/600x300/000/fff" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
   </div>
   <br>
   <h4>Lorem ipsum dolor sit amet</h4>
   <div class="service">
      <img src="https://dummyimage.com/600x300/000/fff" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
   </div>
</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

The content's div is not extending completely in the horizontal direction

Just starting out with tailwind CSS and struggling a bit with the design aspect due to my lack of CSS skills. Need some assistance troubleshooting my layout, particularly in making sure the div container stretches to fit the screen size properly. https:// ...

cssreactjsnext.jstailwind-css

How to retrieve values from checkboxes generated dynamically in php using jquery

This is a unique question and not related to event binding or any suggested duplicates. Hello, I am facing an issue while trying to fetch the value of a checkbox to send it in an ajax request to a PHP page. The checkboxes are dynamically created using PHP ...

javascriptphpjqueryhtmlcheckbox

Stop vertical scrolling in a designated div container

I am dealing with a div that is overflowing, but the horizontal scroll bar is not visible. How can I prevent actual scrolling on the div when the user attempts to scroll using the mouse or arrow keys? Below is the code for this div and a snapshot <!- ...

htmlcss

What is the best way to navigate to the href link?

After attempting to use driver.find_element_by_id // link_text // partial link text without success, I'm wondering what method I should be using to access this href. Currently encountering a No Such Element Exception. Any assistance would be greatly a ...

pythonhtmlseleniumhref

jquery executes a function on each element that is discovered using the .find method

I am working with the following HTML code that is parsed by the system. I want to know how to perform an action on each "find" element and execute a specific function for every anchor found. HTML Code <ul> <li class="category"> <h2&g ...

jqueryhtmlfindnestedeach

Poor height parameter

I am encountering an issue with the height of the div.divB element in this code snippet: <div class="divA"> <img src="http://lorempixel.com/1000/130"/> <div class="divB"> <span>Text text</span> </div> ...

htmlcss

Enable Component to Exceed to the Following Line

I'm having trouble getting a map of a component to move to the next line (as indicated by the yellow arrow). Currently, instead of moving below, it is squeezing the Component (the Cards). I've added background colors for clarity. Any advice would ...

cssreactjsnext.jstailwind-css

Is it possible to hide and reveal specific form elements based on the selection of a checkbox?

Having issues with the code provided below, it's not working as expected. Can you help me figure out what I might be missing? HTML: <input id="id_code_col" type="checkbox" name="code_col"></input> SCRIPT: $(document).ready(function(){ ...

javascriptjqueryhtmlforms

Fixed position scrollable tabs with Material UI

I recently implemented material-ui scrollable tabs in my project, referencing the documentation at https://mui.com/material-ui/react-tabs/#scrollable-tabs. Here is a snippet of the code I used: <Tabs value={value} onChange={handleChange ...

javascriptcssreactjsmaterial-ui

Notification with jQuery

I am looking to display an alert message when val = -1. However, the issue I am facing is that this message always appears at the bottom of the page regardless of the value of val. if ($val == -1) echo ' <script> $( ...

phpjquerycsshtml

Having trouble displaying API JSON data in a Vue.js table component

In my HTML file, I have implemented fetching data from an API and displaying it in a table successfully. Now, I am trying to convert the HTML file to use Vue.js, but encountering some issues. Despite being able to fetch data from the API with Vue, the tab ...

jqueryhtmlcssjsonvue.js

What is the best way to send an HTML form variable to a Perl script using AJAX?

My goal is to pass the HTML variable from the list menu to the Perl script using POST. However, when I try to do this, the jQuery ajax() function executes the Perl script without including the value obtained from document.getElementById. Below is the sni ...

javascriptjqueryhtmlajaxperl

Working with the visibility of a button using JavaScript

My goal is to toggle the visibility of a button using JavaScript. Initially, on page load, the button should be hidden. function hideButton(){ var x = document.getElementById('myDIV'); x.style.display = 'none'; } The visibilit ...

javascripthtmlajax

Tips for adjusting the hue of a single color in a JPEG image

Is there a way to transform white color to red using only CSS, while leaving the rest of the colors unaffected? This should be accomplished without changing any other elements. ...

htmlcss

The slider causing conflicts with widgets and content positioned below it in an HTML layout

When implementing a slider with a fade effect, there seems to be an issue with the placement of widgets on the homepage. The problem arises from the margin-top setting as when images change in the slider, the widgets clash with the slider. During the trans ...

javascripthtmlcss

The date format in AngularJS is not being displayed correctly according to the request

My goal is to retrieve the date in the format of dd/MM/yyyy and pass it along to my URI. However, I am encountering an issue where the date is not being passed in the requested format. Below is the snippet of my HTML code: <script type="text/ng-templat ...

javascripthtmlangularjsdate

Update the CAPTCHA, while also refreshing the entire registration form

JavaScript Snippet <script language="javascript" type="text/javascript"> function updateCaptcha() { $("#captchaimage").attr('src','new_captcha_image.php'); } </script> New Image Code <img src="new_ ...

javascriptphphtmlcss

Having trouble with the Ajax load function not functioning in your HTML code?

The issue has been resolved. Thank you to everyone who helped! Initially, I was attempting to run a file offline instead of on a web server (XAMPP server). Once I uploaded the file to the web server, it started working properly. I had been trying to load ...

javascriptjqueryhtmlajaxxml

Sliding the content in React

My current project involves creating a content slider in React. While I have made some progress, I am facing a challenge in making the content move horizontally instead of vertically. Currently, all the items are stacked on top of each other, preventing th ...

cssreactjsanimationslider

Provide spacing on the sides for a background position

Is there a way to evenly space my background image with 10px margins on all sides instead of just the left side? Currently, it's only working on the left side. .login-page { display: flex; flex-direction: column; background: url("../src/As ...

htmlcss