Showing text beside an image within a division

In my div, I have an image along with a paragraph and h6 text. My goal is to position the text on the right side of the image without it wrapping underneath.

I've experimented with floating both left and right, clearing, setting display to inline-block on the div, and floating the image, but I just can't seem to achieve the desired layout.

<div class="col">
  <img src="images/homepage-blue-icon.png" class="body-img" title="Me" alt="Me" align="left" />
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
</div>
htmlcss

Answer №1

There are several ways to achieve this:

float and margin

h6,
p {
  margin :0 0 0 55px;
}

.body-img {
  float: left;
}
<div class="col">
  <img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" />
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
</div>

float and padding

h6,
p {
  padding :0 0 0 55px;
}

.body-img {
  float: left;
}
<div class="col">
  <img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" />
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
</div>

display:grid - Refer a complete guide on grid layout here: https://css-tricks.com/snippets/css/complete-guide-grid/ 

.col {
display:grid ;
grid-template-columns:60px 1fr;
}
.col> * {
grid-column:2;
}
.col img {
grid-column:1;
grid-row:1/span 2;
}
<div class="col">
<img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" />
<h6>Blueberries</h6>
<p>Healthy and nutritious</p>
<p>Healthy and nutritious</p>
<p>Healthy and nutritious</p>
<p>Healthy and nutritious</p>
<p>Healthy and nutritious</p>
</div>

display:table/table-cell; can be used for vertical alignment by wrapping the image inside it.

.col {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.left {
  display: table-cell;
  width: 60px;
  vertical-align:top;
}

.left:hover {
  vertical-align: middle;
}
<div class="col">
<div class="left"><img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" /></div>
<h6>Blueberries</h6>
<p>Healthy and nutritious</p>
<p>Healthy and nutritious</p>
<p>Healthy and nutritious</p>
<p>Healthy and nutritious</p>
<p>Healthy and nutritious</p>
</div>

Answer №2

Maybe you could consider organizing them in a single row using a table?

<table>
  <tr>
    <td>
        <img style='' src="image.jpg" class="body-img" title="My Picture" alt="My Picture" align="left" />

    </td>

    <td>
      <div>
        <h6>Blueberries</h6>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
          occaecat cupidatat non proident, sunt in culpa qui officia deserunt
           mollit anim id est laborum."
        </p>
      </div>
    </td>
  </tr>
</table>

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

Learn the method to animate changing the background-color of an element using a click function

Can you create an animation for changing the background color when clicking on an element? Most examples I've found use mouseover/hover functions, but none with a click function. The following line changes the background color without any animation: ...

jquerycssanimationclickbackground-color

How to turn off automatic password suggestions in Chrome and Firefox

Currently, I have integrated a 'change password' feature which includes fields for 'old password', 'new password', and 'retype password'. However, the autocomplete feature is suggesting passwords from other user acco ...

htmlangulartypescriptautocomplete

Ways to handle <select> change events effectively in materialize css

My attempt at using a basic jquery change listener on a materialize css select dropdown has been unsuccessful. $("#somedropdown").change(function() { alert("Element Changed"); }); 1) Can anyone provide guidance on how to add a listener to ...

javascriptjquerycssmaterialize

Tips for positioning elements in the header section

I'm struggling to prevent my HTML element from pushing down my other elements. When I look at the header, you can see that the BitBay title is causing alignment issues with the search bar and the account button. Even after trying to use the text-alig ...

htmlcss

Learn the technique of hovering over an image to see it blur and reveal overlay text

Currently, I am in the process of creating my portfolio website and after experimenting with some code, I was able to achieve the desired outcome. <div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;"> <span class="text ...

javascriptjqueryhtmlcss

A guide on displaying containers with jQuery and CSS

Looking to create a smiley survey using only Front-End technologies. Once a radio button is selected, the associated content should appear for comments. Currently, I have set up my CSS with display: none. I attempted to implement this functionality using ...

javascriptjquerycss

PHP and Bootstrap combine in this dynamic carousel featuring thumbnail navigation

Looking to create a dynamic bootstrap carousel with image thumbnails at the bottom? After exploring various code snippets and solutions, I stumbled upon this link. While the code worked, I found the thumbnails to be too small. Below are the functions I use ...

javascriptphphtmlcsstwitter-bootstrap

The positioning and floating of two divs are set to fixed without using percentage width, however, the functionality is not

Apologies for my poor English writing :) I am attempting to float two divs side by side in a fixed position, without using percentages. This code works well on most browsers but is not compatible with IE 6. HTML <div class="right"></div> < ...

cssinternet-explorer-6

Tips for ensuring smaller columns have the same height as their siblings

I'm facing an issue where I have a row with two columns dictating the height, but one of them is shorter than the others. How can I make the shorter column stretch to match the height of the row? This inconsistency in height is causing disruption to ...

css

Utilizing SASS to retrieve the H, S, L values from a color

Is there a way to extract the H, S, L values from a hex color in SASS and assign them to separate CSS variables? $colors: ( "primary": $primary, "secondary": $secondary) !default; :root { @each $color, $value in $colors { -- ...

csssasscss-variables

Difficulty displaying SVG in Opera browser when using the Raphael JS library

Currently, I am experimenting with Raphael JS to create visually appealing SVG graphics on a webpage. You can view my progress at . Most browsers display the graphics properly except for Opera 11. In Opera, the graphics fail to render when clicking on any ...

csssvgoperavisibilityraphael

Integrating HTTP JSON responses into HTML using Ionic 2, Angular 2, TypeScript, and PHP: A comprehensive guide

Currently in the midst of developing my first Ionic 2 app, however, my understanding of typescript is still limited.. I aim to execute the authenticate() method within my constructor and then to: Retrieve the entire JSON response into the textarea and/o ...

htmljsonapiangulartypescript

Using jQuery, how can I dynamically change the stacking order of an element when clicked?

I'm struggling to change the z-Index on button click. I have a static image and a dynamic div, and I want to send the #imgDiv1 behind the static image. Unfortunately, despite trying everything, I haven't been able to achieve this. You can check ...

javascriptjqueryhtmlcssz-index

How to utilize PHP to create a multiple select form for filtering results in a MySQL

I have been attempting to create a query using the results from a search form. In my form, I have a field called "state". My goal is to allow users to select multiple states and receive a list of results that include all the selected states. Currently, I o ...

phpmysqlhtml

What is the best way to expand the navigation bar: should I add a side div or incorporate a background image?

I am encountering two issues that I need help solving. My first problem involves stretching out the navigation bar to fill the height and length of the adjacent div (div#textarea) while also keeping the text of the menu centered within that div. The seco ...

htmlcss

How can I make tooltipster display tooltips properly?

I have been struggling to customize tooltips using a library called tooltipster. Here is what I currently have: Head of index.html: <head> <!--TOOLTIP CSS--> <link rel="stylesheet" type="type/css" href="node_modules/tooltipster-master ...

javascriptjquerycsstooltiptooltipster

Is it possible to make an image gradually appear and disappear?

Is there a way to create a continuous fade in and out effect for an image, transitioning between 40% and 100% opacity? I attempted using a CSS3 opacity property, but it only allows for 0% and 100%, causing the fade effect to be ineffective. Does anyone h ...

jqueryhtmlcss

App builder shows raw HTML code instead of generating a dynamic table

I am currently working on an application that requires gathering data in a csv format from Google Sheets and importing it into App Inventor. Additionally, I need to include HTML code to display the table in a more visually appealing way. Here is what the ...

androidhtmlgoogle-sheetssamsung-mobileapp-inventor

Leveraging route configuration's scope in HTML

As a beginner in AngularJs, I am currently exploring the creation of a single page application. However, I am encountering difficulties in converting my initial code into more professional and efficient code. During this conversion process, I have separate ...

javascripthtmlangularjs

How to choose an option from a dropdown menu using React

In a React application, I am creating a straightforward autocomplete feature. The code is outlined below. index.js import React from 'react'; import { render } from 'react-dom'; import Autocomplete from './Autocomplete'; co ...

javascripthtmlcssreactjsautocomplete