Having difficulty formatting text alignment using CSS

Is there a way to maintain the alignment of text in the output of the 'About' section even when the content changes dynamically? I want the new line to appear just below 'Lorem', but currently, it shifts below the colon(:). Since the length of the text can vary, using text-align to achieve this alignment is not suitable, as it also affects the position of the colon(:).

Any suggestions on how to achieve the desired alignment?

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

<table>
  <tr>
   <td>
     <div>Docteur</div>
   </td>
   <td>
    <div>:&nbsp;&nbsp; Name of Doctor</div>
   </td>
  </tr> 
  <tr>
   <td>
     <div>About</div>
   </td>
   <td>
    <div>:&nbsp;&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min </div>
   </td>
  </tr> 
    <tr>
   <td>
     <div>Location</div>
   </td>
   <td>
    <div>:&nbsp;&nbsp; Some Location</div>
   </td>
  </tr> 
</table>

javascripthtmlcss

Answer №1

If you want to include a column just for the colons, you can use the following code snippet to align the td elements at the top using the vertical-align CSS property.

td {
  vertical-align: top;
}
<table>
  <tr>
    <td>
      <div>Doctor's Name</div>
    </td>
    <td>
      :
    </td>
    <td>
      <div>Name of Doctor</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>About</div>
    </td>
    <td>
      :
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>Location</div>
    </td>
    <td>
      :
    </td>
    <td>
      <div>Some Location</div>
    </td>
  </tr>
</table>

Answer №2

To enhance the structure of the html file you shared, include a specific class within the div tags that indicate the dynamic data (e.g. 

<div class="userEntry">
). Within the css file, make sure to target the div class tag (e.g. .userEntry{}) and introduce left padding by entering padding-left: <value>.

By adopting this approach, you can eliminate the need for &nbsp as spacing will now be controlled exclusively through css padding.

Keep in mind: using pixel values for padding-left may hinder responsiveness; consider exploring percentages or alternative strategies for better results.

Answer №3

Feel free to experiment with the following code snippets.

If you would like to delve deeper, please visit this link.

td {
  vertical-align: top;
}
.td-flex {
  display: flex;
}
.td-flex span {
  margin-left: auto;
  padding-left: 10px; /* you have the option to adjust this value */
  padding-right: 10px; /* you have the option to adjust this value */
}
<table>
  <tr>
   <td class="td-flex">
     <div>Doctor</div><span>:</span>
   </td>
   <td>
    <div>Name of the Doctor</div>
   </td>
  </tr>
  <tr>
   <td class="td-flex">
     <div>About</div><span>:</span>
   </td>
   <td>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min </div>
   </td>
  </tr>
    <tr>
   <td class="td-flex">
     <div>Location</div><span>:</span>
   </td>
   <td>
    <div>Some Location</div>
   </td>
  </tr>
</table>

Answer №4

<table>
  <tr>
   <td>
     <div>Physician</div>
   </td>
   <td>
    <div class="align">Name of Physician</div>
   </td>
  </tr> 
  <tr>
   <td>
     <div>Details</div>
   </td>
   <td>
    <div class="align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min </div>
   </td>
  </tr> 
    <tr>
   <td>
     <div>Location</div>
   </td>
   <td>
    <div class="align">Some Location</div>
   </td>
  </tr> 
</table>

You must give a class like 'align' to the div element in order to eliminate duplicate colon :

td {
  vertical-align: top;
}

div.align {
  padding-left: 1em;
  position: relative;
}

div.align::before {
  content: ":";
  left: 0;
  position: absolute;
}

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

Are cross-browser gradients causing performance problems for browsers?

Although I attempted to tag this question as [subjective] (without success), I understand that it may be unanswerable, involve common knowledge that I can't find, or simply be a matter of opinion. Over the past few months, I have been creating commer ...

csssvgless

Dividing blocks of text into individual sentences

Seeking a solution to splitting a paragraph into individual sentences, I initially attempted the following code: var sentences = paragraph.split('.'); While this method was effective in most cases, it encountered issues with sentences like: ...

javascripttext-segmentation

Different ways to display an HTML page in a well by utilizing a div tag and jQuery from a side menu

Check out my Tutorial Page! Currently, I am working on a simple tutorial page utilizing bootstrap 3. My goal is to showcase the HTML file content within the well container on the right side of the page. However, I am facing challenges as I do not want to ...

jqueryhtmlcss

What is the best way to display a progress bar as a percentage?

Is there a way to visually represent the progress of an upload on the screen using percentages? I want to display a bar that starts at 0% and updates with the percentage from the percentComplete variable. Once the upload is finished, I'd like to show ...

javascriptjqueryajaxcoldfusionprogress-bar

What is the most effective method of testing with jest to verify that a TypeScript Enum list contains all the expected string values?

Recently, I created a list of enums: export enum Hobbies { Paint = 'PAINT', Run = 'RUN', Bike = 'BIKE', Dance = 'DANCE' } My goal is to iterate through this list using Jest and verify that all the string ...

javascriptreactjstypescriptjestjsenzyme

Adding an external CSS file to your .scss files with webpack: A step-by-step guide

Currently, I am working on a JavaScript application that I am compiling using Webpack. The application is split into two separate bundles - one for the custom code called App and another for the frameworks called Vendor. The App bundle consists of all the ...

javascriptnpmwebpack

How to make sure a bootstrap row fills the rest of the page without exceeding the height of the screen

In my Angular application, I am using bootstrap to create the following structure (simplified version). <div class="container"> <div class="header> <div class="mat-card> <!-- Header content --> < ...

cssangulartwitter-bootstrap

observing calls made with twilio using javascript

My goal is to track the status of a phone call happening between two people using their phone numbers. Let's say +558512344321 and +558543211234 are currently on a call. As soon as the call begins, I want the browser to display "Call in progress," and ...

javascriptphpwebsockettwilio

The code is not executing properly in the javascript function

Hello there! I've created a basic login form with JavaScript validation, but for some reason, the code below isn't functioning properly. Here is my HTML and JS code: <head> <script type="text/javascript"> function ha ...

javascriptjqueryhtml

Guide on using jQuery to automatically scroll to the HTML container related to a clicked letter

I am in the process of finalizing my wiki page and I wish to add a specific function. My goal is that when a user clicks on a letter in the alphabet bar, the browser will smoothly scroll to the corresponding letter within the wiki column. However, I am en ...

javascriptjqueryhtmlcss

Display a JSX component based on a specific condition

As a newcomer to React, I am currently working on the navigation portion of my Navbar.js using the react-router-dom useLocation hook. I have successfully obtained the active path that leads to views and now I want to display custom text when a user reaches ...

javascriptreactjsjsxreact-router-dom

What's the best way to pass parameters through Higher-Order Components in React?

my custom component App import React, { Component } from "react"; import City from "./City"; import withDataLoader from "./withDataLoader"; const MyApp = () => { const MyCity = withDataLoader( City, "https://5e5cf5eb97d2ea0014796f01.mockapi ...

javascriptreactjs

What is the reason behind opting for ng-style over style in AngularJS for applying CSS formatting?

Recently, I've delved into AngularJS and have been exploring its depths for a few days now. I'm curious about the use of ng-style in styling components within both static and dynamic webpages. Given that we already have the traditional style tag ...

cssangularjsng-style

How can I incorporate multiple graphs into my AmCharts display?

I am new to using amcharts and have successfully implemented a code snippet to generate two graphs in a chart. The charts are loaded from an external data source specified in the code. var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "d ...

javascriptamcharts

How to keep child elements in BeautifulSoup using Python?

I need help with the following markup: <p>Sample text. Click <a href="google.com">Here</a></p> Can someone assist me in replacing the <p> tag with <span> while keeping the children and text of the tag unchanged? ...

pythonhtmlbeautifulsoup

What is causing this code to malfunction?

Currently delving into the world of Ajax, I've been following a tutorial and have crafted the script below: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function MyFunction(){ var xmlhttp; if(windo ...

javascriptphpjqueryajax

Is Asp.net 4 resetting the array with every new run?

I have developed a basic asp.net web page to generate HTML content. The concept is to store previous user inputs in an array each time they click a button, and display them along with the most recent input. However, I encountered an issue where the array a ...

asp.nethtmlarrays

Organize table information using rowspan functionality

View of Current Table I am looking to implement a side column in my table using rowspan to group dates within each pay period. The goal is for a supervisor to be able to create a new pay period, which will assign a unique integer in the database and then ...

javascriptphphtmlsql

How can I prevent the content from sliding out of view in a Bootstrap carousel?

I am looking to create a slider that includes a form or text. However, I have noticed that when scaling up by 50-75% or when there is a lot of content, the content extends beyond the slider. Image Check out my code on jsfiddle: jsfiddle.net/sL70r2an/ ...

htmltwitter-bootstrapcsscarousel

Issue arising from background change upon component focus

My component needs to change its background color when focused, but for some reason it's not working. The hover effect works fine, but the focus doesn't. Can anyone assist me with this issue? import { CardContainer } from './styles' in ...

javascripthtmlcssreactjsstyled-components