Simple HTML/CSS text blocks positioned beside images in a list format

I'm attempting to design a list (ul) where each li has an img on the left and text aligned to the left (including a title and paragraphs) positioned next to the image on the right.

I've experimented with float: left and various display properties, but I haven't been able to achieve the desired layout. The text keeps wrapping around or beneath the image instead of aligning properly alongside it.

If feasible, I prefer using the simplest HTML and CSS code necessary that is compatible with most browsers.

htmlcss

Answer №1

<ul>
    <li>
        <img />
        <div>
             <span></span>
             <p></p>
        </div>
    </li>
</ul>



img, div {
    display: inline-block;
    vertical-align:top;}

Answer №2

To align text to the right, utilize the float:right property on either the text itself or the parent element containing all paragraphs, followed by adding clear:both below it. Alternatively, experiment with flexbox for better control over layout.

Answer №3

Utilizing the "before" pseudo selector might be a great option for enhancing the image display.

Here's an example: https://jsbin.com/sumomebolu/edit?html,css,output

ul {
    list-style-type: none;
}
li:before{
  content:url('url.jsg');
  position:relative;
  left:-20px;
}

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

What is the best way to incorporate AngularJS bindings when loading HTML content from a string?

I am facing an issue in my angular project where I need to load external HTML from a string variable into a div that currently has a controller scoped to it. The problem is that the HTML being loaded contains angular bindings, but once loaded, these bindi ...

htmlangularjs

Issue with sender field in contact form and mailer function

Having issues with my contact form that has 3 fields and a textarea... I've used jQuery for validation and PHP to handle email sending. The contact form is functioning correctly, but the From field in the received emails is not displaying as expect ...

phpjqueryhtmlajaxemail-headers

JavaScript Comparison of Numerical String Syntax

I created an HTML function to determine the maximum number, but it is returning incorrect results. Could someone please point out what I am doing wrong? Thank you! The code is as follows: <!DOCTYPE html> <html> <head> <meta charset=& ...

htmlinput

Finding text outside of a HTML tag with jsoup

I am working with the following HTML code: Data <div class="alg"></div> <div class="alg"></div> Pepsi 791 <div class="alg"></div> <div class="alg"></ ...

htmljsoup

The process of embedding one script into another script is underway

I've been struggling to optimize the loading of a responsive/mobile page, but then I came across a jQuery plugin that dynamically toggles elements based on screen width. This seemed like the perfect solution as it eliminates the need for extra HTTP re ...

javascriptjqueryhtml

Is there a way to prevent my smartchatbox from covering my fixed top navbar?

Click here for more information I am seeking assistance. Your help is greatly appreciated. The question's heading reveals all you need to know. All you have to do is resize your browser, scroll down, and the answer will become apparent. ...

javascripthtmlchat

Why is the CSS selector `:first-child:not(.ignore)` not working to exclude the `ignore` class from the selection?

Is there a way to utilize the first-child selector with the not(.ignore) selector to target every element that is the first child of its parent, except when that first child has the class ignore? I've experimented with :first-child:not(.ignore){...}, ...

htmlcsscss-selectors

Steps for placing a menu link at the far right edge of the menu

I'm looking to customize my NAVBAR by adding a Donate Link Menu on the right side, next to the search icon. Can anyone help with this simple task? Thank you in advance! Here is the link to the website: www.clihelp.org Below is the menu code for my N ...

htmlcss

I'm having trouble displaying the result of my calculation in the code. Could it be because I forgot to include an output tag?

I am attempting to develop a Miles Per Gallon (MPG) calculator using Javascript. However, I'm encountering difficulties with displaying the results once the "Calculate" button is pressed. <html> <head> <title> MPG Calculator </ti ...

javascripthtmlcss

Discovering the window scroll unit when clicking, as a page smoothly transitions to the top for a specified target position

Is there a way to achieve parallax scrolling on window scroll and navigation click simultaneously? When navigating and animating the page to the top to show the target, I also want to get the window scroll unit. How can I obtain the window scroll unit on ...

javascriptjqueryhtmlcss

Positioning the sDom in jQuery DataTables

Take a look at the image below: I want to adjust the position of the tableTools buttons (Copy, Excel, CSV) so that they appear aligned with the Search Box. I've experimented with different sDom parameters but haven't been successful. This is th ...

cssdatatablestabletools

Implementing the IF statement in jQuery

I've been trying to implement an overflow check when hovering over a div. The issue arises because I'm using jQuery for the hover function and then simple JavaScript for the overflow check in the next step. It seems that directly using an if-then ...

javascriptjqueryhtmlcss

Angular - Dividing Values within Input Arrays

In the input field available to users, they can enter multiple inputs separated by commas. <div class="container"> Enter your values:<input type="text" multiple #inputCheck> <input type="submit"(cli ...

javascripthtmlarraysangulartypescript

Issue with nivo-lightbox not opening upon clicking image

I have diligently followed the instructions to set up this JavaScript plugin, but unfortunately it doesn't seem to be functioning properly. The plugin I'm using can be found here: All the links to the CSS, theme, and JavaScript files are display ...

javascriptcsslightboxnivo-slider

Struggling to align divs in HTML using CSS

Struggling with aligning my divs in the center of the parent div and keeping them inline. I have a parent "page" containing 6 other divs - "bg_01", "bg_02", "bg_03", "bg_04", "bg_05", "bg_06". They sit inline when the window is small, but when it's re ...

htmlcss

Retrieve the updated text content from a textarea using JavaScript/jQuery

For a beginner in javascript and jquery like me, I encountered an issue with a textarea element that has preset content. When I change the value on the site to "new" and click the "showme" button, the alert box displays the preset value instead of the new ...

javascriptjqueryhtmlformstextarea

Bootstrap Modal for WooCommerce

I'm facing an issue while trying to create a modal window using woocommerce variables ($product). The problem lies in the placement of my modal and accessing the correct product id. Here is the code snippet I've been working on. Unfortunately, i ...

javascriptcsswordpresstwitter-bootstrap

How can I make a div or iframe stretch to fill the remaining space using javascript, jQuery, or css?

I'm looking for a way to make the middle iframe dynamically fill the remaining space between two fixed height iframes (one at the top and one at the bottom) regardless of the window screen size. Is there a technique or method that can achieve this? th ...

javascriptjqueryhtmlcssxhtml

Fading away backdrop images for the header

I've created a header class in my CSS with the following styling- header { background-image: url('../img/header-bg.jpg'); background-repeat: none; background-attachment: scroll; background-position: center center; .backg ...

javascriptjqueryhtmlcss

problem with CSS negative margin

When trying to position the navbar inside a div with the class main using negative margins, it causes issues on small screens when clicking on the toggler icon. How can I address this problem without relying on negative margins? <link rel="stylesheet" ...

htmlcss