Tips for aligning text at the bottom of a div that has been floated to the right alongside another div

I have a parent container with two child divs inside; one div is floated to the left and the other is floated to the right.

Here is my current layout:

┌─────────────┬─────────────┐
│  Text left  │ Text right  │
│  Text left  │─────────────┘
│  Text left  │             
│  Text left  │  
└─────────────┘

However, I want the layout to be like this:

┌─────────────┬─────────────┐
│  Text left  │             │
│  Text left  │             │
│  Text left  │             │ 
│  Text left  │ Text right  │ 
└─────────────┴─────────────┘

Here is my HTML code:

<div style="position:absolute">
    <div style="float:left">
        Text left
        Text left
        Text left
        Text left
    </div>
    <div style="float:right;">
        Text right
    </div>
</div>

I want the Text right content to be displayed at the bottom of the right div. How can I achieve this layout?

htmlcss

Answer №1

Utilizing flexbox is the key.

To achieve the desired layout, start by ensuring the heights of both child elements are equal - a task effortlessly handled by flexbox.

Next, arrange the children in a column and employ the justify-content property to align the content of the right child element to the bottom.

.left,
.right {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  padding: 1em 1em 0 1em
}

.parent {
  display: flex;
}

.right {
  justify-content: flex-end;
}
<div class="parent">
  <div class="left">
    <p>Text left</p>
    <p>Text left</p>
    <p>Text left</p>
    <p>Text left</p>
  </div>
  <div class="right">
    <p>Text left</p>
  </div>

Answer №2

Here are a few solutions to address this problem:

Option 1: Utilize the CSS property "display: inline-block; vertical-align: bottom;"

Full code snippet:

<div style="position:absolute">
    <div style="display: inline-block; vertical-align: bottom;">
        Text on the left<br>
        Text on the left<br>
        Text on the left<br>
        Text on the left<br>
    </div>
    <div style="display: inline-block; vertical-align: bottom;">
        Text on the right
    </div>
</div>

Answer №3

Code Example:

td {
    border-right: 1px dotted #000000 !important;
}
<div class="container" style="position: absolute;">        
  <table cellpadding="4" cellspacing="0" style="border:1px dotted;">
    <tbody>
      <tr>
        <td>Text left</td>

      </tr>
      <tr>
        <td>Text left</td>
      </tr>
      <tr>
        <td>Text left</td>
<td rowspan="3" align="bottom;">Text right</td>
      </tr>
    </tbody>
  </table>
</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

Add content to the beginning of the input with the assistance of bootstrap. However, ensure that when utilizing "form-group row", the content is shifted

I am experiencing an issue with my Bootstrap 4 form. I am using the 'form-group row' class to display labels and inputs on the same line, but when I try to prepend a $ sign before an input, it shifts the input to the next line. Below is the code ...

htmlcssbootstrap-4

Align the last column to the right side using HTML

I am facing an issue with my current project. I have a page that displays a list of posts in a CSS grid. The last two columns of the grid are supposed to be right-aligned, but for some reason, it's not working as expected. Here is the snippet of the c ...

htmlcssangular

Issues with the functionality of jQuery's .load() method are causing

I am encountering an issue for the first time. Inside ajax.html, I have the following code in the header: $(document).ready(function(){ $( "#result" ).load( "/loaded.html" ); }); In the same directory, there is a second page named loaded.html: <d ...

javascriptjqueryhtmlajax

Can anyone provide guidance on how to trigger 3 unique functions in a specific order using JavaScript?

I've been troubleshooting this issue for quite some time, but I just can't seem to figure it out. Here's my dilemma: I have three functions - one to shrink a div, one to reload the div with new data, and one to enlarge the div - all triggere ...

javascriptjqueryhtml

Having trouble with my unique 404 page templates not functioning properly in Django

I'm having trouble implementing my custom 404 and 403 error pages for my Django project. I've previously used the same code in other projects, but it's not functioning as expected this time. Here is the function I am using: def error_404(re ...

pythonhtmldjangohttphttp-status-code-404

Adjusting the header background color and inserting a logo once a specific threshold is reached

Currently, I am designing a website where I need the background color to transition from transparent to black and display a logo once the user scrolls down to a certain point. I am a beginner in javascript and I am facing some difficulties with this task. ...

javascriptjqueryhtmlcss

Steps for creating a sleek vertical slider with transitional effects using JavaScript and HTML

Take a look at my code snippet: <table> <tr> <td onclick="shownav()">Equations of Circle <div id="myDownnav" class="sidenav"> <a>General Info</a> <a>In Pola ...

javascripthtmljquerycss

Hovering over the designated area will reveal the appearance of

I've encountered an issue with a list group in a card. Specifically, when hovering over the topmost item in the list group, a border appears underneath it (which should only appear when hovering). However, when I try to override this behavior using :h ...

htmlcsstwitter-bootstraphoverbootstrap-4

The font-weight property appears to be ineffective across all browsers

I'm struggling with the font-weight property in my CSS. Despite trying different values like lighter, bold, and even numerical values like 300, it doesn't seem to have any effect on the font weight in any browser. I am using the following code to ...

css

Using VueJS to create buttons by nesting data arrays

Struggling with creating buttons in multiple modal windows by looping over an array. The initial buttons work fine, but the nested array of options doesn't show up in the new modal window when clicked. How can I make the optional buttons appear when t ...

javascripthtmlvue.js

Selectors for fake elements and neighboring siblings

I'm struggling to show my menu when the toggle checkbox is selected. I know that my .menu-container is not a sibling of the toggle element, but I'm not sure how to make it work without moving the toggle outside of the div so that .menu-container ...

htmlcss

Ways to prevent onMouseDown from triggering when the element is exclusively clicked?

I'm currently working on developing a game where units (svg elements) are controlled using React. In this game, the units should be draggable, and clicking on a unit should open a form. However, when I click on the unit, only the mousedown event is t ...

javascripthtmlreactjs

Tips for making an input form that triggers an alert popup

After creating an HTML form with text input, utilizing Javascript for validation as shown below: I am trying to trigger an alert box thanking the user for entering data when the submit button is clicked. I have faced challenges in implementing this witho ...

javascriptcssformsvalidation

Use jQuery to create a price filter that dynamically sets slide values based on the filter object

I'm currently utilizing the jQuery slide filter to sort products based on price. The filtering value is set within the script, but I am interested in dynamically setting it based on the highest/lowest number found on my page using a data attribute. D ...

javascriptjqueryhtml

What could be causing the disappearance of the replaced div content after a refresh?

Does anyone have experience with using jquery in conjunction with django? I am currently trying to update the content of a div after successful user authentication. While my code is functional, I'm facing an issue where upon page refresh, it reverts b ...

jqueryhtmldjango

The embedded Google iframe is causing unnecessary padding at the bottom of the page

Below is a snippet of HTML code: <div class="google-maps"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109782.8671228349!2d76.62734023564995!3d30.69830520749905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fee90 ...

htmlcssiframe

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

As a newcomer to creating Chrome (or other browser) extensions, I am working on developing one that applies custom CSS rules to specific page elements. Overall, it seems to be functioning as intended, but with some minor issues. One issue I have encounter ...

javascripthtmlcssbrowsergoogle-chrome-extension

Issues with Magento Shopping Cart upon using the browser's back button

I use a modified version of Magento 1.6.2 with significant customizations, particularly to the shopping cart template. Encountering an issue when users click the 'back' button in the browser after adding an item to the shopping cart. This proble ...

phphtmlmagentoe-commerce

Elements in Internet Explorer become unresponsive after being hidden or shown using jQuery

One issue I'm encountering is with a group of tabbed divs that I'm using jQuery hide() and show() to toggle the visibility. This method functions perfectly in most browsers, but unfortunately in Internet Explorer (IE), the hidden tabs become unre ...

jqueryhtmlcssinternet-explorer

CanJS utilizes mustache templates to escape HTML tags

I have a requirement to present a series of choices to the user. I am using a mustache template along with the CanJS JavaScript framework to showcase these options. The problem arises when attempting to display an option such as: Potato Rs. 12 The mustac ...

javascripthtmlmustachecanjscanjs-view