What is the best way to position multi-line text alongside an image without it wrapping below the image?

I managed to align a single line of text with an image successfully (view fiddle).

<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50" />
  <span class="profile-details">
    username
  </span>
</div>

But, when attempting to insert another line of text, it ends up wrapping below the image (check out fiddle). 

<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50" />
  <span class="profile-details">
    username
    <br />
    username
  </span>
</div>

Is there a way to display multi-line text that extends beyond the image's height but doesn't wrap underneath it?

Bonus question: Any tips on vertically aligning it as well?

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Answer №1

Expanding on @freestock.tk's tabular example..

.profile-details-wrapper { display: table-row; }
.profile-picture {
  display: table-cell; 
  vertical-align: top; 
  margin-right: 10px;
}
.profile-details { display: table-cell; vertical-align: top; }
<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50">
  <div class="profile-details">
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
  </div>
</div>

Answer №2

img {
  float:left;
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 20px;
}

p {
  display: table-cell;
  width: 450px;
}
<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50" />
  <span class="profile-details">
<p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here </p>
  </span>
</div>

Answer №3

Consider adding a float: left; property to the image and description elements. This may impact website layout, but it can help align all text to the left side.

Answer №4

Here's a nifty little workaround that should do the trick...

.profile-picture {
  display: block;
  margin: 0 10px 10px 0;
  float: left;  
}
.profile-details { float: left; width: calc(100% - 50px - 10px); }
<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50">
  <div class="profile-details">
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
  </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

Showing Transition Effect in Vue for Bootstrap Modal Form

I'm struggling to implement a simple Fade-in / Fade-out transition when displaying a Bootstrap Modal form in Vue. The form displays properly but without the desired transition effect. Can anyone help me identify what I'm doing wrong? Thank you in ...

twitter-bootstrapvue.js

Prevent lengthy headers from disrupting the flow of the list items

I've encountered an issue while working on a website that features a list of items. When the title, such as "roller blinds," spans across two lines, it disrupts the layout below. How can I prevent this from happening without compromising on having lon ...

htmlcsshtml-lists

Unable to implement a filter on data retrieved through $http in Angular framework

I have a situation where I am retrieving data from an API in my controller using $http.get, and then I want to enhance the appearance of this data by applying a text formatting filter. However, I keep encountering TypeError: Cannot read property 'sp ...

javascripthtmlangularjs

What is the best way to serialize data from non-form elements and make it easily accessible through params[:model]?

I have developed a unique Sinatra application that leverages an external API to load data and exhibit it on a page. Utilizing Sinatra, the information is retrieved and stored in a temporary model instance (which is NOT saved) for seamless access to all its ...

javascriptjqueryhtmlsinatra

Steps for incorporating a Java applet into a website

I am currently working on creating an applet for a website, but unfortunately I am encountering difficulty in embedding the applet onto the site. Below is the snippet of my HTML code: <html> <body> <p>Test</p> <applet code="Tes ...

javahtmlapplet

What is the best way to switch the orientation of divs from horizontal to vertical with CSS?

I currently have a footer setup with 3 divs that are displayed horizontally at the bottom of the page. <div class="footer-text footer_mainDIV"> <div class="footer_leftDIV"> All rights reserved </div> <div class="fo ...

htmlcss

What is the method to display a navbar exclusively on the product category page?

I am trying to create a navbar that will only show up on the product category page of my Woocommerce website. Is there anyone who can provide me with the necessary PHP or JavaScript code to achieve this? Thank you in advance! Here is the HTML code of the ...

phphtmlwordpress

Leveraging the JSON property within AngularJS to separate the "Images" attribute by utilizing the split() function

var app= angular.module("myApp",[]) app.controller("ajaxCtrl", function($scope,$http) { $scope.customer=[]; $http.get("sampledata.json").then(function(response) { $scope.customer=response.data; }); }); /sample.json/ { ...

htmlangularjsjson

Executing an SQL delete query with a button click using a JavaScript function in PHP

I have created a setup with three essential files - index.html, database.php, and function.js. In database.php, there is a form generated containing a delete button that triggers the deletion SQL query when clicked. The primary objective is to present a ta ...

javascriptphphtmlmysqlajax

The issue with MUI TextField: the outline is overlapping the label

Recently, I encountered an issue with a MUI TextField in my project. In its default state, everything appeared fine: https://i.stack.imgur.com/WFzOr.png However, when I increased the font size as per the theme provided below, the label started to overlap ...

cssreactjsmaterial-ui

Is it necessary to trigger a change event only for the specific ID that has been altered, even if there

I need a way to highlight the background of text inputs in green for 2 seconds when there is a successful AJAX request, but only for the specific input field that was changed. I'm struggling to figure this out using jQuery. For example, if I change t ...

htmljquery

Ways to ensure the final unchecked checkbox stays in the checked state

I currently have a set of checkboxes that are pre-selected. However, I would like to ensure that if all checkboxes except one are unchecked, and an attempt is made to uncheck that final checked checkbox, an error message will appear and the checkbox will n ...

javascripthtmlangularjscheckbox

Activate Dropdown on hover and automatically close the menu when a link is clicked

Looking for assistance with a Dropdown menu that opens on mouse hover but needs to close when a link is clicked within the menu. Do you think JavaScript would be necessary for this function? .dropdow { position: relative; ...

htmlcss

Leveraging Angular to dynamically adjust the height of ng-if child elements based on parent

I'm struggling with a few things in my current setup. I have a view that consists of 3 states - intro, loading, and completed. My goal is to create a sliding animation from left to right as the user moves through these states. Here is the basic struc ...

javascriptcssangularjsangularjs-directive

Steps to create a toggle effect for each ion-card individually

Issue at hand: Whenever toggling, the change effect is applied to every ion card. Expected Result: I aim to achieve a toggle effect individually on each ion-card. HTML Code: <ion-grid> <ion-row> <ion-col *ngFor="let ...

htmlangularionic-frameworktogglecard

How can I create a circular Datepicker in JavaFX?

Struggling with customizing my JavaFX application using CSS. Everything was going smoothly until I encountered the Datepicker. Despite trying various approaches, none seem to be working. Is there a way to round the Datepicker just like my TextFields? Here ...

javacssjavafxjavafx-8javafx-css

Images that are automatically generated cannot be interacted with by clicking on them

I currently have 4 images loaded onto my website. Whenever I click on one of the images, it becomes highlighted as desired using the following code: JavaScript Function 1 : var ImageSelector = function() { var imgs = null; var selImg = null; retu ...

javascriptjqueryhtmlcss

Automatically dismiss a Modal Popup without the need for a button or click event

I am currently facing an issue where I have a page constantly refreshing, and I am looking to implement a modal popup with a message saying "Please wait..." while the page reloads using $state.reload(). GenericModalService.confirmationSplit($rootScope, m ...

javascriptbootstrap-4bootstrap-modal

Tips for sending a variable to the onclick function within an HTML element

Currently, I am utilizing the tabulator library to generate tables based on json data. I am attempting to insert a button into a cell using a custom cell formatter. Below is the approach I am taking: var graphButton = function(cell, formatterParams, onRe ...

javascripthtmlbuttononclicktabulator

When utilizing drag and drop in HTML5, the items.webkitGetAsEntry() method is not available

Hey there, I am attempting to drag and drop files into my file system using Chrome, but I encountered the following error in the console: var dnd = new DnDFileController('body', function(files, e) { var items = e.dataTransfer.items; for ...

javascripthtml