Tips for positioning text at the bottom of a div without specifying a set height

I plan to extract the style later. My goal is to understand how to achieve this using pure HTML.

I would like the Select and Description labels to be aligned with the bottom of the green box. Unfortunately, neither vertical-align: bottom; nor position: absolute; bottom: 0; are producing the desired effect. Instead, the text ends up at the bottom of the wrapper box. Could someone kindly take a look at my question on JSFiddle and let me know what I might be overlooking?

https://i.sstatic.net/jvalA.jpg

https://i.sstatic.net/ogJCh.jpg

<div id="wrapper" style="width: 80%; height: 100%; overflow:hidden; margin: 0 auto; float: left">
  <div class="row" style="width: 100%; height: 80%; margin: 0 0 0 0; float: left; background-color: aqua;">
    <div id="heading" class="row">
      <p style="text-align: center;">This is a title</p>
      <div style="width: 15%; float: left; background-color: yellow;">
        <label style="vertical-align: bottom; position: absolute; bottom: 0;">Select</label>
      </div>
      <div style="width: 70%; float: left; background-color: orange;">
        <label style="vertical-align: bottom; ">Description</label>
      </div>
      <div style="width: 15%; float: left; background-color:green;">
        <label style="vertical-align: bottom; ">Number of items available for a very long title</label>
      </div>
    </div>
  </div>
</div>
htmlcss

Answer №1

To eliminate the floats, opt for display: inline-block instead. Place all three elements in a wrapper, set vertical-align: bottom for that wrapper, and ensure there are no spaces or line breaks between them to avoid unwanted whitespace leading to misfitting elements within their container:

<div id="wrapper" style="width: 80%; height: 100%; overflow:hidden; margin: 0 auto; float: left">
  <div class="row" style="width: 100%; height: 80%; margin: 0 0 0 0; float: left; background-color: aqua;">
    <div id="heading" class="row">
      <p style="text-align: center;">This is a title</p>
    </div>
    <div class="wrap1" style=" vertical-align: bottom;">
      <div style="width: 15%; background-color: yellow; display: inline-block;">
        <label style="vertical-align: bottom; ">Select</label>
      </div><div style="width: 70%; background-color: orange; display: inline-block;">
        <label style="vertical-align: bottom; ">Description</label>
      </div><div style="width: 15%; background-color:green; display: inline-block;">
        <label style="vertical-align: bottom; ">Number of items available for a very long title</label>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/2hxt8x1f/1/

P.S.: It is strongly recommended to refrain from using inline styles and switching to external CSS and classes for improved clarity during development.

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

When scrolling, all sections display above the stationary header

On my home page, I have a header that remains fixed at the top of all sections. However, when I scroll down, the contents and sections appear above the fixed header, making it look like a background. Is there a way to ensure that all images and content go ...

jqueryhtmlcssfixed

A single feature designed to handle various elements

I currently have this HTML code repeated multiple times on my webpage: <form class="new_comment"> <input accept="image/png,image/gif,image/jpeg" id="file" class="file_comment" key=comment_id type="file" name="comment[media]"> <spa ...

javascriptjqueryhtml

Are there differences in alignment?

I'm looking to create a unique visual effect where text is aligned differently on each line, shifting left, right, center, or wherever else, with the alignment origin varying by just a few pixels. This would be perfect for adding some visual interest ...

javascripthtmlcss

Looking to reset the default display option in a select dropdown using JavaScript or jQuery?

Here is some HTML code for a select element: <select> <br> <option>1</option><br> <option>2</option><br> </select> This select element will initially display the first option item (display ...

javascripthtmlselect

Create space in the bootstrap framework between an image and text

I'm trying to increase the space between the title/description and the icon image in my Bootstrap CSS layout. I attempted adding ms-5 to the div tag, but it didn't have the desired effect. NOTE: Please refrain from suggesting margin-right:5px as ...

htmlcssbootstrap-5

Efficient Loading with jQuery

Upon page load, I am pre-loading the following HTML: <div>Content for lazy load </div> <div>Content for lazy load </div> <div>Content for lazy load </div> <div>Content for lazy load </div> <div>Content ...

jqueryhtml

Resolving AJAX requests within a loop

I am working with a JSON file that contains widgets {"widgetname": "widget1", "widgetID": "FJRH585fKFJN234NC"} As I iterate through the JSON, I generate HTML for each widget object. $.ajax({ url: "get_json.php", data: {action: "get_widgets", ...

jqueryhtmlajaxforeach

Another component's Angular event emitter is causing confusion with that of a different component

INTRODUCTION In my project, I have created two components: image-input-single and a test container. The image-input-single component is a "dumb" component that simplifies the process of selecting an image, compressing it, and retrieving its URL. The Type ...

javascripthtmlangulartypescript

Guide to creating scrolling parallax web page effects with JavaScript

I am new to Javascript and recently came across a website with a fascinating scroll parallax effect. The images on the site overlap and move as you scroll, similar to the effect on this particular website Example website: let scrollH; let photo1 = do ...

javascriptjquerycss

Listen for the chosen choice

What is the best way to display a chosen option in PHP? I have set up an HTML menu list with options for "Buy" and "Sell". I need to output 'I want to buy the book' if someone selects "buy", or 'I want to sell the book' if someone pick ...

phphtml

What steps should I take to ensure that the getElementsbyName function works properly on both Internet Explorer and Firefox browsers

Encountering a JavaScript error in IE but not in FF ("document.getelementsbyname(...).0.innerhtml is null or not an object": var oldVal = parseInt(document.getElementsByName("outSL")[0].innerHTML); //value pulled from the database Here is the asp.net c ...

javascriptasp.nethtmlinternet-explorerdom

Issue with Website Rendering: Safari 4 exhibits display glitch showing temporary content before showing a blank white screen

Currently, I'm in the process of developing a specialized rails application. However, there seems to be an unusual rendering error that has been reported by Safari 4 users. It's quite peculiar because the page appears briefly but quickly disappea ...

javascripthtmlruby-on-railscssuri

Retrieving current element in AngularJS using jQuery

I have 4 templates, each with mouse actions that trigger functions: ng-mouseover="enableDragging()" ng-mouseleave="disableDragging()" Within these functions, I update scope variables and would like to add a class using jQuery without passing any paramete ...

javascriptjquerycssangularjshover

What is the best way to showcase a dynamic amount of items using radio buttons in an HTML form?

DataFile.json: {"elements":[{"id":1,"name":"apple"},{"id":2,"name":"banana"},{"id":3,"name":"orange"}]} Goal: Utilize PHP to read DataFile.json, delete selected elements from the array, and save the changes. Approach: After reading the file and displayin ...

phphtmljsonradio-button

Creating layered images in HTML 5 Canvas using multiple images

How can I draw two images on one canvas without the first image possibly loading slower than the second one and appearing on top of it? I want to ensure that the second image is always drawn on top of the first image. Any suggestions? ...

imagehtmlcanvas

Step-by-step guide for setting up CodeMirror

I'm feeling a bit lost with what to do next: <link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> <script> var editor = CodeMirror.fromTextArea(myTextarea, { mode: "text/html" }); ...

javascripthtmlcodemirror

Executing PHP Code following a JavaScript Confirmation Box: Best Practices

How can I run the following code in PHP? var answer = window.confirm("Do you want to overwrite the file..."); Based on the user's selection of "OK" or "CANCEL"; If the user chooses "OK", I need to execute the following PHP code without using AJAX. ...

javascriptphphtmlajax

What is the best way to ensure a NavBar stays at the top of the page when it is not collapsed?

I have integrated a NavBar using Bootstrap 5, which functions flawlessly. However, I am facing a specific issue that I haven't been able to resolve yet: When a user increases their screen size to <300%, it triggers the collapse button to appear. I ...

htmlcssnavbarbootstrap-5

Organizing items in rows with alternating quantities using CSS within a fluid design

Encountering a peculiar issue while attempting to organize items spread across multiple rows, with each row having either 5 or 4 items (alternating between 5 and 4 items per row). However, when the screen width reaches 480px, the layout automatically switc ...

htmlcssresponsive-designcss-float

Styling CSS for text enclosed in a paragraph element

I have a block of text formatted in the following way <div class="container"> <p style="text-align: center;"> <span style="text-decoration: underline;"> <strong> <img src="//cdn.shopify.co ...

javascriptjqueryhtmlcss