What is the best way to position text and an image within a div container?

Essentially, I am dealing with two blocks of text along with an accompanying image.

<div class="container">
    <span class="title">Some Text</span>
    <img src="an_image.png" />
    <span class="note">Additional Text</span>
</div>

I aim to position all these elements at the bottom of the container div, with the title aligned to the left and the note pushed all the way to the right. The image should sit next to the title and align itself with the bottom of the title text. Thus far, I have only been successful in achieving this layout using relative/absolute positioning. Could CSS offer a more elegant solution?

Below is an illustration of the desired outcome. By adjusting the width and height of the container, the title, image, and notes seamlessly line up at the bottom, left, and right as shown:

csshtmlalignment

Answer №1

Give this a shot

  <style type="text/css>
    .container { align-items: baseline; position: relative; border: solid 1px Gray; }
    .note { position: absolute; right: 0; bottom: 0; }
  </style>

  <div class="container">
      <span class="title">Text</span>
      <img src="an_image.png" height="100" width="100" />
      <span class="note">Other Text</span>
  </div>

Apologies, here is the updated solution... Check out the live demo

Answer №2

If you're feeling adventurous, experiment with the vertical-align property, although it can be a bit tricky.. I prefer using absolute positioning myself. Give it a try and see for yourself on the W3C Tryit Editor

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

Press the Relay button to initiate the ASP.NET File Upload functionality

Within an ASP.NET C# website, I have incorporated an input that allows the user to upload a file to the server. To address the limitation of not being able to style an input of type=file, I devised a visually styled div that mirrors the appearance of the i ...

c#jquerycss

Assign the value of the selected option to the ng-model instead of the displayed text

When creating a new user, I am collecting user input. Users have the option to select their state from a dropdown menu. I am looking to save the state ID instead of the state name when the user makes a selection. How can I assign the state ID to the newSit ...

htmlangularjs

When the parent element is set to a fixed size, the child element does not respond to the overflow auto property

I am trying to create a parent div with fixed size that contains two children, but I want only the second child to have overflow set to auto. However, it's not working as expected... Here is the code snippet I used: .parent { height: 200px; width ...

htmlcssoverflow

Having trouble incorporating autocomplete search results into an HTML table using Jquery, Ajax, and JSP

My current project involves an App that utilizes AJAX with jQuery to communicate with a Spring-boot REST controller. While the app is functional, I am facing difficulty in displaying the search results neatly within HTML tables. https://i.sstatic.net/7sw8 ...

javascriptjqueryhtmlajaxspring-boot

Place an element that exceeds 100% in size at the center

How can I center an image that is larger than its parent element? I have set the min-width and min-height to 100% so that the picture will always fill up the parent element. The issue arises when the image does not match the proportions of the parent elem ...

javascriptcss

Can someone provide guidance on how to align the navigation bar to the right in Bootstrap?

Having trouble setting up the navigation menu on the right hand side with Bootstrap, like most modern websites. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-togg ...

htmlcssbootstrap-4

Retrieve script directly from the server instead of relying on cached versions for future use

When a browser has a cached version of a JS file, I want it to be loaded and executed. Additionally, I would like this cache to be refreshed with a fresh copy from the server after each execution. <script src="script.js"></script> < ...

html

What is the proper way to utilize the script type "text/x-template" in a multilanguage context?

I'm currently working with ASP NET and VueJS. In my ASP NET, I have a view component that looks like this: <script type="text/x-template" id="form-template"> @if (string.IsNullOrEmpty(Model.LastName)) { <in ...

htmlasp.netvue.jskeyboardmonitor

Take charge of Bootstrap 4 dropdown transformation class while creating a Megamenu

I am currently working on creating a Megamenu using Bootstrap 4's dropdown Component. The issue I'm facing is related to Javascript adding CSS styles with transform, such as transform: translate3d(9px, 5px, 0px); This is causing disruption in m ...

jqueryhtmlcssbootstrap-4megamenu

Issue with Navbar Component's Conditional Position Property Unresponsive in Tailwind

I am currently facing an issue with displaying and hiding a navbar based on the value of a variable. While I have managed to successfully toggle the Navbar's visibility, my problem arises when attempting to keep the Navbar constantly visible at the la ...

cssreactjstailwind-csscss-positiontailwind-ui

What is the best way to target all div elements containing a child with the class "test-class"?

How can you choose all div elements that contain a child element with the class "test-class"? This question has been identified as a duplicate of Is there a CSS parent selector?. After reading that question, it is evident that this question is indeed redu ...

csscss-selectors

Spacing issues in Bootstrap footer on mobile devices when resizing left and right

Recently, I added a new footer to my Twitter Bootstrap website and noticed that when I resize the window, gaps appear on the left and right sides. I understand that this issue is related to the following CSS code... @media (max-width: 767px) { body { ...

htmlcsstwitter-bootstrap

Is there a way to extend this section to fill the entire screen height without any white space at the bottom?

We've been working on extending the content to the full height of the screen, but no matter what we try, there's always some white space lingering at the bottom. Any suggestions on how to fix this issue? section { height: 100vh; background ...

htmltwitter-bootstrapcssbootstrap-4

Is it feasible to adjust the positioning of invalid tooltips?

I've been trying to figure out how to adjust the position of my invalid tooltips to move a bit to the right and match my input position, but I haven't had any success yet. Here's the image I'm referring to: https://i.sstatic.net/fovSS. ...

htmlcssbootstrap-5

What is the best way to extend the final column of a table across the entire width?

Here's the code I'm working with: .frm-find-people table td:nth-child(1) { padding: 5px 15px; width: 100px } .frm-find-people table td:nth-child(2) { border: 1px solid red; } <form class="frm-find-people"> <table> ...

htmlcss

Achieving horizontal or vertical alignment of columns in Bootstrap 4 based on viewport size

Here is the layout I am working with - .left { height: 100vh; background-color: #208ea3; } .right { height: 100vh; background-color: #37a862; } <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="sty ...

htmlcsstwitter-bootstrapbootstrap-4

Choose the Nth option in the dropdown list using programming

Currently, I have a script that dynamically populates a select box with unknown values and quantities of items. I am looking to create another script that mimics the action of selecting the Nth item in that box. Despite my research, I have been unable to ...

javascriptjqueryhtmlselectdrop-down-menu

What is the best way to center text within a button when there is also an image present?

I'm trying to create a button with an image and some text, but I can't seem to get it aligned properly. Here's the code I have so far: <button><img src="https://www.google.com/s2/favicons?domain=google.com">&nbsp;Go ...

htmlcssbuttonvertical-alignmenttext-alignment

What are some strategies for increasing my website's mobile responsiveness?

I've recently completed my online portfolio, and it appears to be functioning properly on desktop computers. However, I'm encountering responsiveness issues when viewing it on other devices or smartphones. Even though I have included the necessar ...

cssbootstrap-4flexbox

What is the best way to extract the innerHTML of every button and exhibit it in a text box?

How can I create a simpler JavaScript code for clicking buttons to input letters into a text box? Instead of creating getElementByID for each button, is it possible to use some kind of loop? <div id="alpha" > <br/> <div align="cente ...

javascripthtmlcss