The words are located behind the img element once the line is broken

One section of my website features main articles with an image on the left and a description on the right. However, I am facing an issue where the text does not break properly when it reaches the end of the container and ends up behind the image. To better illustrate the problem, I have created a JSFiddle: JSFiddle. How can I ensure that the text breaks and starts again after the image? Is it possible to achieve this within the same container as I am currently doing? The container is styled as follows:

div{
    margin-left:2.7vw;
    background:black;
    padding:10px;
    width:50vw;
    height:49vw;
    word-wrap:break-word;
}

As for the image and text styles:

div img{
    margin-left:-10vw;
    position:absolute;
    height:40vh;
    width:25vw;
}

div figcaption{
    color:white;
}

All these elements can be found in the provided fiddle. Any assistance on resolving this issue would be greatly appreciated. Thank you!

htmlcss

Answer №1

The image has been positioned 'absolutely'. To adjust the image, apply the float:left property and eliminate the position:absolute property.

https://jsfiddle.net/pa8qq9Lh/

Answer №2

To make your image float, add the float attribute.

For example: float:left;

Also, ensure you remove absolute positioning.

div{
margin-left:2.7vw;
background:black;
padding:10px;
width:50vw;
height:49vw;
word-wrap:break-word;
   }

 div input{
display:none;
          }

div img{
margin-left:-10vw;
position:absolute; <--- REMOVE THIS RIGHT HERE
float:left;
height:40vh;
width:25vw;
          }

div figcaption{
color:white;
          }

Answer №3

To achieve the desired effect, adjust the image by floating it to the left instead of the right and removing the absolute positioning:

div img {
    margin-left:-10vw;
    /*position:absolute; <-- remove this */ 
    float:left; /* <-- add this */
    height:40vh;
    width:25vw;
}

JSFiddle

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

I am trying to display an element upon hovering using Jquery, but unfortunately, despite recognizing the event, it refuses to function as expected

I've been searching for a solution to show a submenu on hover by removing the hidden class that is hiding it. Despite trying various approaches, including using CSS and JavaScript, I haven't been able to make it work. Here is the code snippet I h ...

javascripthtmljquerycss

Display method JSONized

Looking for guidance on improving code efficiency and best practices. In my current project, I am working with a JSON Array structured like this: [ { "Date": "2014-07-16", "DiscPoint": "Description 1", "DisBy": "Person 1" ...

htmlajaxjson

Using *ngFor to Retrieve JSON Data Multiple Times

I'm trying to fetch 3 images from my endpoint that contains a large number of images using Angular's *ngFor directive (or any other suitable method) Below is my component.html <div class="col-sm-4 col-xs-6" *ngFor="let result o ...

htmlangular

Ensuring the continuous transmission of data frames is essential for WebSocket communication

Our system utilizes websocket technology to transmit user activity events such as clicks, mouse movement, scroll, input, and more. In addition to these events, we also send a snapshot of the HTML DOM. On average, the size of the HTML snapshot is approximat ...

javascripthtmlwebsocket

Safari: The onbeforeunload event

Welcome! To experience the Leave | Stay confirmation box on your page, please make sure you are using Safari 10. I am currently facing an issue with getting the confirmation box to display properly across different browsers. To begin, please visit and l ...

javascriptjqueryhtmlcsssafari

What steps can be taken to add a radio button group to a form in order to choose between the smoking and non-smoking sections of a restaurant?

I'm trying to replicate the functionality of radio buttons within a bootstrap form-group, where a line in a form contains multiple buttons ("btn btn-success" for example) that can be selected, but only one at a time. I am aiming for an output like thi ...

javascripthtmlcssbootstrap-4bootstrap-modal

Show unique language text in the <noscript> element based on the user's browser language

I am just starting out with HTML, and I would like to show a message if JavaScript is disabled. To do this, I have placed the message within the <noscript> tag, which is working perfectly. <noscript> Need to enable Javascript. </noscript> ...

javascripthtml

Adjust the background color of the header as you scroll

Seeking assistance in adjusting the background color of my header upon scrolling. This is my current implementation: header.component.ts export class HeaderComponent { ngOnInit(): void { const header = document.querySelector('.header'); ...

cssangulartypescript

Creating a component that surpasses all others

I have a code snippet that contains styling information for two div elements. How can I ensure that my <div id="home"> appears below my <div id="navigate"? Any suggestions? #home { background-color: black; color: grey; text-align: c ...

htmlcss

Issue with Dynamic Theming in Ionic Framework

Currently, I am using Ionic in combination with Angular to create an App. I have introduced dynamic theming by adding two .scss files into my theme folder. In my app.scss file, I define the layout of components without colors, while all color styles are st ...

htmlcssangularionic-frameworktheming

Display the final row by hovering over the line

<table> <thead> <tr> <th>First</th> <th>Second</th> <th></th> </tr> </thead> <tbody> <tr> <td>Data1</td> <td>Dat ...

htmlcss

Is the p tag not becoming absolute from the bottom even when set to position: absolute?

My p tag in the section properties of div class="sf sf_2 won't align to 0 px from the bottom of the div. It seems to move 0px from the top, right, and left but not bottom. I've tried changing its position property and where it's nested, but ...

htmlcss

What is causing the newly generated input tags to disappear from the page?

I'm having an issue where my code successfully creates new input tags based on user input, but they disappear shortly after being generated. What could be causing this to happen? <form> <input type='text' id='input' /> ...

javascriptjqueryhtml

Is it possible to move the login button to the right side of the screen?

I'm attempting to move the Login menu all the way to the right on the navigation bar. Currently, all the menu items are aligned to the left and I need to align the Login menu to the right. However, I'm unsure of where to begin. The navigation me ...

htmlcss

Is it possible to include numbers and commas in JQuery Validation?

I have implemented a jQuery validation plugin to validate the fields of a form. One specific requirement is to validate a field to only allow commas and numbers. Below is the HTML code snippet: <input type="text" placeholder="Number of Employees" requ ...

javascriptjqueryhtmlvalidation

What is the best way to utilize components depending on the screen size of the device?

Is there a way to show varying HTML elements or components depending on the device size? In React, you can utilize a package called react-responsive. However, in Next.js, when using this package in a component, server-side rendering does not occur on tha ...

htmlnext.jsresponsivereact-responsive

What is the best method for passing parameters from HTML to AJAX within code?

My project involves working with Flask, HTML, and Ajax. Here is the HTML code snippet: <script type=text/javascript> $(function() { $('a#calculate').bind('click', function() { $.getJSON('/_add_numbers&ap ...

javascriptjquerypythonhtmlajax

Is there a way to use CSS to make a div expand as much as it can?

I am attempting to accomplish the following; Do you think this is achievable? ...

htmlcss

Trigger a fire event upon entering a page containing an anchor

My query is similar to this particular one, with slight differences. I am working on a page that includes an anchor, such as page.html#video1. Within this page, there are multiple sections identified by ids like #video1, #video2. Each section comprises of ...

javascriptjqueryhtmleventsanchor

Is there a way to position labels above their corresponding elements using this customized input style?

My CSS for styled inputs has become too complex, making it difficult to remove and fix certain elements. Specifically, I am facing issues in getting labels positioned above my input fields, select options, and output section. /* Cus ...

htmlinputlabelbootstrap-5