What is the proper way to justify text alignment in HTML?

I want to align the text to the right like the first row, but the second row keeps overflowing below the image. How can I ensure that the text is properly aligned regardless of the number of rows?

<a href="javascript:;" id="A_3"><i id="I_4"></i></a><span id="SPAN_5">     
</span>
<h5 id="H5_6">Payroll</h5>
    <p id="P_7">
        What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv</p>

Please check out the jsbin example for reference.

Edit: It seems that Safari(1) displays this correctly, while Google Chrome(2) does not.

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

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

htmlcssalignment

Answer №1

Eliminate the box-sizing: border-box; property from both elements. Additionally, include width: 457.5px; to the #H5_6 selector.

Review the code snippet provided below.

#A_3 {
  float: right;
  height: 65px;
  text-align: center;
  width: 65px;
  background: rgb(153, 153, 153) none repeat scroll 0% 0% / auto padding-box border-box;
  border-radius: 50% 50% 50% 50%;
  font: normal normal normal normal 35px / 50px'Open Sans', arial, sans-serif;
}
/*#A_3*/

#H5_6 {
  text-align: right;
  width: 457.5px;
}
/*#H5_6*/

#P_7 {
  color: rgb(95, 95, 95);
  height: 56px;
  text-align: right;
  width: 457.5px;
  font: normal normal 300 normal 16px / 30.8px'Open Sans', arial, sans-serif;
}
/*#P_7*/
<a href="javascript:;" id="A_3"><i id="I_4"></i></a><span id="SPAN_5"></span>
<h5 id="H5_6">
Payroll
</h5>
<p id="P_7">
What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv What what everytrksdjfsdf sdmnb fsdmnb sd xcmnvb xcm mbb mvcn bcvxmcnbv
</p>

Answer №2

If you add "margin-right:115px;" to the <p> tag, it will automatically adjust the height and width.

Answer №3

After some adjustments, I managed to resolve the issue

padding: 10px;

applied to the B_4 element (the custom square)

I appreciate your assistance!

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 receiving accurate HTML content in an Ajax request

I have used an Ajax call to fetch data from a function that returns an entire HTML table. $.ajax({ url: "/admin/project/getProjectTrackedTimes", headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('cont ...

javascriptjqueryhtmlajaxformat

Create an Angular material table with expandable rows that become sticky when scrolled past, then automatically unstick once they are no longer in view

Currently, I am working with Angular Material Table v11.1.0 which includes a main row with expandable rows. I want the main row to become sticky once an expandable row is opened and remain sticky while scrolling through the table. My goal is for the main ...

htmlangulartypescriptangular-material

Using the combination of Chrome browser, Lucida Grande font, and word-wrap

Recently, I encountered a unique situation in Chrome where an odd combination of styles led to an issue. To help illustrate the problem, I created a fiddle which can be viewed here: http://jsfiddle.net/C3CbF/1/ This particular issue is only visible if you ...

cssgoogle-chrome

By utilizing the "order" property, I can arrange divs to start at the bottom and ascend as additional elements are added

Exploring the use of display: flex and order:, I noticed a curious behavior. When I set the order for my first div to 0 (order: 0;), it appears at the top of the page. However, as I add more divs with different orders, they initially show up in unexpected ...

htmlcssflexbox

Issue with PHP Upload: Index is undefined

Having Trouble with PHP Upload: Encountered an issue: Undefined index: file in Error on line: $count = count($_FILES['file']['name']); Tried numerous codes to fix this error, but none have worked so far PHP Code: <?php $count ...

javascriptphphtmlforms

Identifying and handling overlay blockers using Selenium technology

Currently, I am conducting tests on a website that utilizes in-browser pop-ups to display details about objects. These pop-ups are occasionally modal, meaning they render the rest of the screen unusable and activate a gray transparent overlay that covers e ...

cssselenium

Unable to access localStorage

I created a Plunker to store a value in localStorage: <!DOCTYPE html> <html> <script> localStorage.setItem('test', "hadddddha"); </script> </html> Then, I built a test page to retrieve the value from local ...

javascripthtmllocal-storagesession-storage

Concealing/Revealing Elements with jquery

For hours, I've been attempting to switch between hiding one element and showing another in my script. Here is the code I am using: <script type="text/javascript"> function () { $('#Instructions').hide(); $('#G ...

javascriptjquerycss

Issues with aligning center vertically and horizontally using flexbox are causing unexpected behavior

Understanding the basic concepts of centering a flex container using justify-content:center and align-items: center, I am facing an alignment issue with my box. Can anyone help me with this? This is what I have attempted so far: <template> <di ...

javascripthtmlcssvue.jsflexbox

The parent div will not accommodate two nested divs

I'm having an issue with two divs inside a parent div not being contained within the container when I inspect the page, even though I've wrapped the div around the other 2 divs. My goal is to apply attributes to the parent div instead of each in ...

htmlcss

Exploring the process of passing parameters in Material-UI React styled components

Recently, I developed a new component const CategoryDialog = (props) => { const classes = useStyles(); console.log(props); return ( <div> <Dialog fullScreen open={props.dilaogOpenProp} TransitionCompone ...

javascriptcssreactjsmaterial-ui

Adjust the hue of the SVG sprite

I am currently using an SVG sprite as the background image for my project: .naar-logo { background: url(images/salt_sprite.svg) no-repeat -8px -78px; width: 36px; height: 49px; position: relative; top: 38px; } <div class="naar-logo ...

htmlcsssvg

Generating HTML table rows dynamically from objects using Angular's ng-repeat functionality

In my Node-RED setup, I am utilizing the HTML angular code within a "template" node. Within my system, I have an object that consists of circuit boards distinguished by serial numbers. Each circuit board is equipped with two channels, each having its own ...

htmlangularjsobjectnode-red

TypeScript code runs smoothly on local environment, however encounters issues when deployed to production

<div> <div style="text-align:center"> <button class="btnClass">{{ submitButtonCaption }}</button> <button type="button" style="margin-left:15px;" class="cancelButton" (click)="clearSearch()"> {{ clearButtonCapt ...

htmlangulartypescriptdomangular-ng-if

The use of Angular's ngClass directive does not work within the link function

I have a straightforward directive that renders an element, and this is the template: <div class="nav-item"></div> The .nav-item class looks like this: .nav-item { height: 50; } Here's the directive in action: angular.module('m ...

javascriptcssangularjs

Alignment Woes in Bootstrap Designs

I'm seeking assistance regarding the alignment of content on my webpage. The content is not aligning properly with the sidebar and footer, and I'm unsure how to proceed. The page should have a left margin to avoid touching the sidebar, and the fo ...

htmlcssbootstrap-4

The issue of a malfunctioning Customized Bootstrap Carousel when used with flex and gap is causing

I have created a unique bootstrap carousel where instead of displaying one div, I showcase three (one in the middle and half of each on the sides). The issue arises when I add borders to my divs and attempt to create spacing between them using display: fle ...

csssassbootstrap-5

Utilizing DataTables to dynamically populate a table with data fetched from an AJAX request

I'm currently in the process of developing a program that showcases various topics within a specific subject. My main query revolves around whether or not the DataTable functionality will be compatible with this particular setup. The following is th ...

htmljqueryajaxdatatablesweb-deployment-project

What techniques can I use to ensure that my website's layout adjusts correctly when resized?

body { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-size: 16px; box-sizing: border-box !important; } a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-decorat ...

htmlcssflexboxmedia-queries

What is the best way to ensure that a <div> extends all the way to the bottom?

My goal is to have this element reach the bottom of the screen, but I also have a header which complicates things. Setting height: 100%; or 100vh results in the page being too big and scrollable. I don't want to manually calculate it because of respon ...

htmlcss