Align text columns to the right within flexible rows

I'm currently constructing a grid using flexbox, but I've encountered some border and padding issues leading me to devise the following HTML structure:

https://jsfiddle.net/rqmdxcjo/

<div class="flex">
  <div class="flex w-40">
    <h3 class="pr-6 py-0.5">Row A</h3>
  </div>
  <div class="flex w-25 border-right">
    <div class="py-0.5 px-6">AAA</div>
    <div class="py-0.5 px-6">AAA</div>
  </div>
  <div class="flex w-25 border-right">
    <div class="py-0.5 px-6">AAA</div>
    <div class="py-0.5 px-6">AAA</div>
  </div>
  <div class="flex w-10">
    <div class="pl-6 py-0.5">AAAA</div>
  </div>
</div>

Everything looks great as shown below:

Row --------- AAA AAA | AAA AAA | AAA

The issue arises when dealing with strings of different lengths, like in this case - AAA vs AAAA vs AAAA. As you can see in the image and fiddle, the text on these lines remains left-aligned. I've attempted applying float: right and text-align: right at various points with no success.

https://i.sstatic.net/hCf45.png

https://jsfiddle.net/rqmdxcjo/

Any suggestions on how to right align the text in these cells while keeping the padding and border intact?

htmlcssflexbox

Answer №1

If I am getting this correctly, you are looking to align the divs containing text, such as AAA, AAAA, etc, to the right. However, your current code is not achieving this because these divs are only sized based on their content. Therefore, even when applying text-align: right; to them, they appear to be aligned according to the length of "AAAA" rather than being fully right-aligned. Try giving these divs a set width using:

.flex.border-right div {
  flex: 1 1 50%;
  text-align: right;
}

I am selecting these divs with .flex.border-right div, but feel free to add your own class if necessary.

Check out the Updated Fiddle here

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

Tips for resolving a double click issue with a jQuery slide up/down animation

When I click a button, there is an animation that makes a div slide up and then down again. It functions the way I want it to, but the first time you click it, it doesn't work; you have to click twice for it to respond. Someone recommended using... ...

javascriptjqueryhtmlcss

How to retrieve a string from a regular expression in Javascript without [Object object] output

Within my code, there exists a parent form component and a child component used for auto-completing text input. The Parent component passes an array of objects named autoCompTxt, consisting of name and id fields, to the Child component. //Parent: const [ob ...

javascripthtmlreactjsreact-hooks

Use a for loop to iterate through elements and retrieve input values using getElementById()

As I work through a for loop in JavaScript, I am utilizing the getElementById() method to fetch multiple input values. To begin, I dynamically created various input boxes and assigned distinct id's using a for loop. Subsequently, I am employing anoth ...

javascripthtmlloopsgetelementbyid

When using angular.less, the @import feature is functioning correctly but a 404 error is displayed in the

Currently, I am working on a project using AngularJS along with angular.less. To centralize all my constants, I have stored them in one .less file and imported it at the beginning of all my other less files using a relative path: @import "constants" Even ...

cssangularjsless

Achieving Center Alignment for Material-UI's <Table> within a <div> using ReactJS

Currently, I am working with a Material-UI's <Table> embedded within a <div>. My goal is to center the <Table> while maintaining a fixed width. I want the table to remain centered in the browser, but if the browser window is minimize ...

javascriptcssreactjsmaterial-ui

I am attempting to integrate a datetimepicker onto my website, but I keep encountering an error. Can

Once upon a time, my website had a perfectly functioning datetimepicker. However, one day it suddenly stopped working. After some investigation, I realized that the JavaScript file I was referencing had been taken down. Determined to fix the issue, I visit ...

javascriptjqueryhtml

Is it possible to manipulate a modal within a controller by utilizing a certain attribute in HTML, based on specific conditions (without relying on any bootstrap services), using AngularJS?

Within my application, I have a modal that is triggered by clicking on a button (ng-click) based on certain conditions. Here is the HTML code: <button type="button" class="btn btn-outlined" ng-click="vm.change()" data-modal-target="#add-save-all-alert ...

javascriptangularjshtmlmodal-dialog

Issues with JavaScript scripts functionality on my live server

Hey everyone, I'm new to this community and having some trouble with my index.html file. Everything works fine except for one script that only runs when I open the file directly with live server in VSCode. Can someone help me out? The script causing i ...

javascripthtmlcss

Adjust the height of Fullcalendar when the window is resized to maintain the aspect ratio as it shrinks

I am having trouble adjusting the height of an FC (fullcalendar) within a div. My goal is to have the FC completely fill the div without overflowing. Despite setting the height attribute during initialization, the FC's height does not resize properly, ...

javascriptjqueryhtmlcssfullcalendar

Adjusting text to begin after a variable by two spaces (equivalent to 5 pixels)

When displaying the echoed text below, I noticed that "DURING" sometimes overlaps with the variable $submittor when there are not enough &nbsp;s. On the other hand, if too many &nbsp;s are added, there ends up being excessive space between $submitt ...

css

Ways to adjust the anchor and h1 elements using CSS

I'm working on an HTML document with some markup, <a class="home-link" href="index.html" rel="home"> <h1 class="site-title">John Arellano's Personal Website</h1> </a> While styling the site title, I encountered a problem ...

htmlcss

How about optimizing HTML by utilizing jQuery's magic?

For my website, I aim to allow users to choose a grid size by clicking on elements of a large grid display. This can be compared to selecting a table size in Microsoft Word. Each grid element will have a designated position ID for organization. Instead of ...

javascriptjqueryhtml

What is a way to include a ":hover" effect in Elm without relying on signals?

I'm looking to apply a :hover style to an element using Elm's HTML library. I've considered using Signals and Sets to manage selected nodes, but it feels like overkill for such a simple task. Another option is adding an external stylesheet, ...

cssfunctional-programmingelm

Problem with CSS transition on horizontal scrolling list items

I am currently working on a horizontal list with list items. When I hover over the list, it is supposed to expand horizontally to display more information, although this feature has not yet been implemented. However, I am having trouble understanding why ...

csscss-transitionscss-animationsmousehover

The CSS class is not functioning properly while the ID is working perfectly

A question I have pertains to the navigation menu on my website and its default styling... <nav> <ul id="MenuBar1" class="MenuBarHorizontal"> <li> <a href="#">Home</a> </li> <li> <a class="Menu ...

htmlnavigationcss-selectors

When the mouse hovers, the background image of <ul> <li> tabs will disappear

I have a simple set of HTML tabs using <ul> and <li> elements with some custom CSS styles. You can view the code on jsfiddle here. Each tab follows this structure (for more details, please refer to the linked code): ... <li class="icon ...

htmlcss

Tips for showcasing a Bootstrap alert

I'm attempting to integrate Bootstrap Alerts into my project, but I'm struggling to display them programmatically. Here is the HTML snippet: <div class="alert alert-success alert-dismissible fade show" role="alert" id="accepted-meal-al ...

javascriptjquerycsstwitter-bootstrap

The mobile version of Bootstrap v3.3.6's drop down submenu items fails to expand properly

I have been working on a website using Angular 1, Bootstrap, and CSS3. The Bootstrap navbar functions perfectly in desktop mode, but the submenu is not working in the mobile version. I am able to expand the main menu item, but the three submenus are not vi ...

angularjscsstwitter-bootstrap-3navbar

Substituted text appears as the label on the screen

I decided to update a section of a content editable div by inserting a tagged word. However, instead of only displaying the new word, it also shows the tags along with it. Here is the original content within the div: This text is contained within the & ...

javascriptjqueryhtmlregex

The essence of a character undergoes a complete transformation once it is presented in

There seems to be an issue with the character "т", ascii code: 209 130 When this particular character is put in italics, its appearance changes drastically... Check out the т character in italics (take a look at the source code - it's fascinating) ...

htmlcsscharacterasciiitalics