Position elements flush to the left and right

Is it possible to align the text in divs so that it perfectly lines up along the edges?

.name {
  margin: 0 0 5px 10px;
  font-weight: bold;
  font-size: 14px;
 }
  
.row {
  margin: 0 0 5px 10px;
  width: 500px;
  justify-content: space-between;
 }
<div class="name">Align</div>

<div class="row">
zxcsdz 123
</div>
<div class="row">
qwe 4561
</div>
<div class="row">
asdsq 789
</div>

The current output looks like this

zxcsdz 123
qwe 4561
asdsq 789

However, the desired alignment is more precise, resembling something like this

zxcsdz   123
qwe     4561
asdsq    789

htmlcss

Answer №1

There are various methods to achieve this task, however, it is important to note that you cannot easily separate the words and numbers as desired. Each phrase acts as a single unit within your code, making it difficult to manipulate them individually. One approach is to place each word and number in a separate element tag, such as a P tag, and then utilize flexbox for assistance. Take a look at my code snippet below for a clearer understanding:

.row {
  display: flex;
  gap: 20px;
}
.num {
  text-align: right;
}
<div class="row">
  <div class="align">
    <p class="word">zxcsdz</p>
    <p class="word">qwe</p>
    <p class="word">asdsq</p>
  </div>
  <div class="align">
    <p class="num">123</p>
    <p class="num">4779</p>
    <p class="num">789</p>
  </div>
</div>

Answer №2

You have the option to structure your code in a more semantically meaningful way by using elements other than just divs to contain text content.

.name {
    margin: 0 0 5px 10px;
    font-weight: bold;
    font-size: 14px;
}

.row {
    width: 100px;
    display: flex;
    justify-content: space-between;
}
<div class="name">Align</div>

<div class="row">
    <div>
        zxcsdz
    </div>
    <div>
        123
    </div>
</div>
<div class="row">
    <div>
        qwe
    </div>
    <div>
        4561
    </div>
</div>
<div class="row">
    <div>
        asdsq
    </div>
    <div>
        789
    </div>
</div>

Answer №3

There are various methods to achieve this. One approach is to use two inline elements with text-align. In the following example, I utilized flexbox along with text-align.

.name {
  margin: 0 0 5px 10px;
  font-weight: bold;
  font-size: 14px;
 }
  
.row {
  margin: 0 0 5px 10px;
  display:flex;
 }
.row .r1 {
  text-align: left;
  
}
.row .r2 {
  text-align: right;  
  width: 100px;
}
<div class="name">Align</div>

<div class="row">
  <div class="r1">zxcsdz</div> 
  <div class="r2">123</div>
</div>

<div class="row">
  <div class="r1">zxcsdz</div> 
  <div class="r2">>123</div>
</div>

<div class="row">
  <div class="r1"]/gt;zxcadea</div> 
  <div class="r2">aemvbi</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

Can one utilize HTML's .querySelector() method to target elements by xlink attribute within an SVG document?

Here is the scenario: <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="url"></a> </svg> </body> Now, can you utilize the HTML DOM's .querySe ...

javascripthtmldomsvgxlink

The scroll() function in jQuery does not bubble up

Recently, I encountered an issue with a Wordpress plugin that displays popups on scroll. The code I currently have is as follows: jQuery(window).scroll(function(){ //display popup }); The problem arises with a particular website that has specific CSS ...

javascriptjqueryhtmlcsswordpress

JavaScript code for displaying mouse positions and Geolocation using OpenLayers, along with a Geocodezip demonstration

I have attempted to merge Geolocation and Mouse Position Display (longitude/latitude; outside of map) from the OpenLayers and geocodezip site, but I am facing issues. The Mouse Position Display works correctly, however, Geolocation does not seem to work. U ...

javascripthtmlcssopenlayers

CSS3 Animation for Marquee Image

I'm struggling to create a CSS3 animation for an image. My goal is to have the image continuously wrap around and scroll across the page, but I can't get it to work as intended. Here's a simple snippet of my HTML: <div id="space" class=" ...

htmlcssmarquee

Present Images and Text Alongside Each Other in a Grid Layout

My goal is to have an image and text displayed side by side, but for some reason they are appearing stacked on top of each other. https://i.stack.imgur.com/F8OXL.png If you want to take a look at the code I am using, here is the link to my CodePen: https: ...

htmlcss

Create dynamic Bootstrap 4 menus featuring three levels of navigation - the initial dropdown sub-menu may not display any selectable options

Using Bootstrap 4 and jQuery 2.2.4, I've created a navbar with three layers of menus, comprising two levels of drop-downs from the top-most level. Everything works smoothly except for a glitch on mobile devices. The menu collapses to the hamburger ic ...

cssbootstrap-4

Using Clip Path will result in the content always being hidden if it

Here is an example I created: div { -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); background-color: red; width: 150px; height: 150px; position: relative; } ul{ position: absolute; ...

cssclip-path

Arranging adjacent div blocks to maintain alignment in a stylish way

I am facing an issue with divs that are placed side by side inside a table. These divs have been styled to appear as colored blocks. Everything seems fine when the text within each div fits on two lines, however, if it overflows onto another line, the en ...

htmlcss

Submitting an HTML form to a PHP file for processing before returning to the original HTML page for further interaction

I am looking to figure out how I can send a <FORM> from an HTML page to a PHP file that will retrieve data from a database and then return the results to the same HTML page without any redirection. What I aim for is to avoid redirecting users. Take ...

phphtmldynamic

Revamp the md-select Container

Hello there! I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects. Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. I ...

cssangularjsangular-material

What is the best way to make the block rotate each time the button is clicked?

Specifically, I am having trouble getting the block to rotate properly. Currently, the block only rotates once when clicked, but I want it to rotate each time I click in both directions. Any suggestions on how to achieve this? var now = 10; $('. ...

htmlcsssvg

Utilizing Ruby interpolation to dynamically select elements in Capybara's CSS selectors

Having trouble with invalid selector errors when attempting to locate an element using capybara This method is successful: page.find("#widget_amount_Standard") But I encounter issues when trying any of the following: credit_type = "Standard" page.find( ...

cssrubycapybara

Unable to expand Bootstrap navbar due to collapsing issue

I recently implemented a collapsed navbar on my website using bootstrap. However, I'm facing an issue where it does not open when clicking on the hamburger menu. After researching various solutions for this problem and trying them out, none of them s ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for seamlessly incorporating advertisements into a mixed application

I am having trouble adding banner ads to my hybrid application developed with Telerik. Despite my extensive research, I have been unable to find a suitable solution. Is there any html5 or javascript banner advertising service/API that is compatible with ...

javascripthtmltelerikadsadsense

Modifying Checkbox BorderWidth in Material UI v5

Seeking assistance with adjusting the checkbox border width in Material UI v5. I currently have a custom checkbox and would like to remove the border width. Despite trying numerous solutions, I have been unsuccessful so far. checkbox <Checkbox de ...

cssreactjsmaterial-uinext.jsjss

Can you suggest some unconventional HTML/CSS attributes and tools for arranging a form in a way that results in a unique tab order?

As part of my role, I am tasked with transforming mock specs provided by our clients into custom web forms. Our application comes equipped with tools specifically developed to streamline this process. Recently, I was presented with a particularly intriguin ...

htmlcss

What is the best way to position an SVG background image at the bottom of a container?

I am facing an issue with using an SVG as a background-image on a pseudo element. The image is not as tall as the container, so I would like to position it at the bottom of the container while having the background color fill up the top portion to create a ...

csssvg

Integrate HTML parsing both inside and outside of an iframe using BeautifulSoup

My current project involves web scraping a real estate listing platform using Selenium, BS4, and Python. The script works by fetching the links to each listing page before proceeding to parse the HTML content of those pages. One key component is a Chrome E ...

htmlseleniumiframebeautifulsoup

Tips for emphasizing a specific cell in a row based on its expiration date

In my quest to find a script that colors dates within two weeks from today in red and past dates in orange, I have tried various methods without success. I am struggling to implement this feature with my current knowledge. <TABLE> <TR><TD&g ...

javascriptphpjquerycss

How can you incorporate AJAX to add a paragraph element to your HTML document?

I have encountered an issue with two files in my project. The first file is an HTML document, while the second file is a PHP file called ajax_access_database.php. Originally, I intended for the PHP file to access a database, but complications arose, leadin ...

javascriptphphtmlajax