Tips for maintaining space beneath an image when text wraps around it

.blogimgarea
{
width: 38%;
padding-right: 26px;
float:left;
}
img{max-width:100%}
.blogtextarea
{
width:55%;
padding:22px 32px 0 0;
float:right;
}
<div class="newpostregion pt70">
<div class="blogimgarea">
<img class="featblogimg" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Keeptidy_ask.png" title="In The News">
</div>
<div class="blogtextarea">
<div class="titlelineblog">In The News</div>
<div class="metalineblog">
By sitemanager  |  Friday, Feb 12, 2016  |  0 Comments
</div>
<div class="contentblog">
<div class="domore">
<h2>Our Plastic Surgeon In the News</h2>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et viverra nisl. Nullam lorem tellus, eleifend eu dolor ut, consectetur venenatis velit. Mauris vestibulum sapien ac neque rutrum aliquam. Curabitur diam eros, luctus ac mattis eu, lacinia in turpis. Etiam sed commodo risus. Phasellus odio augue, mollis vel risus nec, vulputate maximus tellus. Duis accumsan, neque at egestas vestibulum, nisi sem ornare tortor, nec consequat lacus sem vitae lectus. Cras ac nibh et velit porttitor placerat eget nec mauris. Vivamus ut lacus non lorem volutpat euismod sit amet ac neque. Pellentesque imperdiet semper ligula, ac pharetra est pretium at. Quisque et venenatis ligula, in eleifend mi.

Vivamus placerat metus a neque placerat, tincidunt tincidunt magna lacinia. Morbi eget orci arcu. Suspendisse tristique nibh velit, non volutpat dui aliquet at. Cras lacinia nibh sed leo viverra condimentum. In et quam mattis, eleifend ipsum nec, facilisis felis. Vivamus suscipit arcu ut magna laoreet convallis. Morbi suscipit semper magna in dignissim. Vivamus cursus erat sed nulla dictum malesuada at eget ex. Curabitur cursus tincidunt nisl. Praesent in viverra nibh. Donec congue est nulla, nec interdum purus ullamcorper quis. 
</div>
</div>

</div>
<div class="clear"></div>
</div>

I am currently facing an issue with my html structure:

Although I am familiar with html and jquery, I am struggling to create empty space on the bottom-left corner of an image like this:

I can usually handle JavaScript-based tasks easily, but figuring out how to leave space below the image has proven to be challenging. Any suggestions or pointers would be greatly appreciated as I have dedicated considerable time to solving this issue without success.

javascriptjqueryhtmlcss

Answer №1

When the image is set to float:left and placed before the paragraph, you have the option to add padding or margin to the paragraph. This will cause the image to push the text in further.

img {
  float: left;
  padding-right: 10px;
}
img+p {
  padding-left: 50px;
}

Check out the jsfiddle here

In case the image is floating and positioned inside the paragraph, a negative margin needs to be assigned:

.indent {
  padding-left: 50px;
}
.indent img {
  float: left;
  margin-left: -50px;
  padding-right: 10px;
}

View this jsfiddle for reference

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

How to enhance your jQuery Gallery with clickable images?

I have recently integrated a jQuery Gallery into my website. While everything is functioning properly, I am looking to transform the gallery images into clickable links that lead to higher quality versions of the images. Below is the code snippet for the g ...

jqueryhtmlimagegalleryhref

Is using an interval the best method to ensure that an Ajax call has finished successfully?

I have a scenario with two input text fields and a save button. <input type="text" id="myInput" /> <input type="text" id="searchResult"/> <button id="myButton>save</button> The myInput t ...

javascriptjqueryajaxevent-handlingjquery-events

ReactJS safeguarded route redirection/refresh obstacle

Utilizing react and react-router-dom: import React from 'react'; import { Switch, Route, Redirect } from 'react-router-dom'; To secure a route with the following: Router const Router = () => { return ( <Switch> ...

javascriptreactjs

Creating a dynamic input box with an add/remove button in each row using jQuery

Need help with a jQuery-based UI that allows users to dynamically add input boxes. The desired look is as follows: Default appearance: INPUT_BOX [ADD_BUTTON] [REMOVE_BUTTON] Clicking on the [Add_Button] should add another row like this, and so on: ...

javascriptjqueryhtmldynamic

Ways to observe redux action flow within a component

I am currently developing a React application structured with the following elements: redux typesafe-actions redux-observable My query is: How can I trigger a UI action when a specific redux action occurs? For instance, if we have these asynchronous ac ...

javascriptreactjstypescriptreduxredux-observable

Having trouble shutting down Metro Bundler on Windows?

While working on my React Native development, I regularly use npm start to get things going. However, I've run into an issue recently when trying to stop the process using Ctrl + c. It seems like I can no longer use npm start smoothly: ERROR Metro ...

javascriptnode.jsreactjsreact-nativenpm

Mongoose fails to persist data

Exploring the world of Express and following a tutorial to create a project. Currently stuck in the seeding phase where I am trying to populate my database with data. However, when I execute the command node product-seeder.js in the terminal, no data is be ...

javascriptnode.jsmongodbexpressmongoose

Creating a dynamic visual effect with image overlap in the Sencha Touch carousel

I've created a carousel that loads multiple images, but I'm experiencing an issue where each image is overlapping with another image from a different card. Here's a visual of the problem: As shown in the screenshot, parts of one image are a ...

csssencha-touchextjscarousel

Unable to access parameters within a bootstrap modal when receiving data via ajax

I am facing an issue while submitting a data parameter using PHP Codeigniter that is coming from ajax return data. Whenever I submit the form, I do not receive this parameter. Below is the HTML code: <a href="#myModalBiaya" class="trash" role="button ...

phpjqueryajaxtwitter-bootstrapcodeigniter

Unable to attach numerous parameters to the content of the request

I am encountering an issue with my code where I have two classes and need to call two separate models using two store procedures to insert data into both tables. The controller is set up like this: [HttpPost] public IHttpActionResult AddData([FromBody]ILi ...

javascriptc#angularjsasp.net-web-apiasp.net-web-api2

Tips for arranging elements in proper order following a rotation

Having trouble aligning rotated divs? Let's say we rotate .straight by 30deg, and now we want to find the new offset coordinates of its bottom right corner. This way, we can perfectly match up the bottom left corners of .curve with this new coordinate ...

javascriptjquerycssmathrotation

Construct a new array within a JavaScript constructor function

I have been working on setting up a constructor and trying to initialize an array inside the object that will be created. This specific array is meant to hold multiple objects. function Cluster3DObject(name){ this.name = name; ...

javascriptarraysoopconstructorthree.js

showing a loading spinner while sending an ajax request, patiently awaiting the response, and preventing any further interactions on the page

On my page, I am utilizing multiple ajax calls to load specific parts of the response. However, I need to display a spinner on the section where the ajax call is being made to indicate that content is loading. Is there a way to create a universal method th ...

javascriptjqueryajaxblock

Update the displayed image on the webpage based on information retrieved from the database

Can someone help me figure out how to change the clickable icon on getseats.php from available to unavailable when a seat's status is 0? I'm struggling with this and any advice would be appreciated. Here's the code I have: <?php $noerro ...

javascriptphpajaxjson

Developing a Multi-Faceted Array Utilizing SQL Data

The requirement of the plugin I am using is to provide it with an array structure in JavaScript that looks like this: var data = [ { "id": 1, "name": "University1", "list": [ {"id": 1, "name": "Dorms", "list": ...

javascriptphpjquerysqlarrays

issue arising from integrating material-ui components with code in a react javascript application

Struggling with integrating code and material-ui components in react jsx, I encountered an issue. Here's the problematic snippet: const icols = 0; const makeTableRow = ( x, i, formColumns, handleRemove, handleSelect) => <TableRow key ...

javascriptreactjsmaterial-ui

How to use $$[n] in Spectron/WebdriverIO to target the nth child element instead of the selector

Attempting to utilize Spectron for testing my Electron application has been challenging. According to the documentation, in order to locate the nth child element, you can either use an nth-child selector or retrieve all children that match a selector using ...

javascripttypescriptelectronwebdriver-iospectron

Unable to delete touchmove event - Vue watching system

Preventing scrolling on mobile devices: const stopScroll = function(e) { e.preventDefault() } Adding the listener: document.body.addEventListener('touchmove', stopScroll, { passive: false }) Removing the listener: document.body.removeEvent ...

javascriptvue.js

Eliminating 'related' elements with jQuery

I am facing an issue with deleting items in a list. The list contains two types of products, product-x and product-y. Whenever I delete one type of product, I want the equivalent product of the other type to also be deleted. I have tried different approac ...

javascriptjquery

What is the method for selecting a specific row in a Primefaces Datatable using HtmlUnitDriver and Selenium?

Check out this code snippet: import org.openqa.selenium.By; import org.openqa.selenium.WebElement; import org.openqa.selenium.htmlunit.HtmlUnitDriver; import org.openqa.selenium.support.ui.ExpectedConditions; import org.openqa.selenium.support.ui.WebDriv ...

javajavascriptajaxseleniumprimefaces