Struggling to keep text aligned to the left?

Check out the image at in my jsfiddle. It remains fixed in its position regardless of the screen width.

However, the adjacent text does not behave in the same way.

I aim to have the text positioned DIRECTLY next to the icon without any movement even if the container is resized due to changing window width resulting in some text being hidden.

JSFIDDLE 

@charset "UTF-8";
.row {
width: 100%;
margin-top: 0px;
margin-right: 0px;
…
…

</ul>

  </div>

  <div class="column_60 right_half">
    <h2 class="column_title">RIGHT COLUMN</h2>
  </div>

</div>

htmlcsscss-position

Answer №1

Implement text-align: left on the elements within .taskPreviewWrap li.

For elements with class .t-Date, adjust margin-left: -197px to margin-left: 40px as needed.

Improved Fiddle Link

@charset "UTF-8";
.row {
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
display: inline-block
}
.row.blockDisplay {
display: block;
}
.column_60 {
width: 55%;
float: left;
margin-top: 0px;

...

.t-ShortDesc{
font-weight:bold;
font-size:9pt;
letter-spacing:-0.2px;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
display:inline-block;
vertical-align: top;
position:absolute;
text-overflow: ellipsis; /* will make [...] at the end */
    width: 22%; /* change as necessary */
    white-space: nowrap; /* single line paragraph */
    overflow:hidden; /* older browsers */
margin-left:24px;
margin-top:-17px;
}
<div class="row"></div>
<div class="row blockDisplay">
  <div class="column_40 left_half">
    <ul class="taskPreviewWrap">
      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want all the text and dates in this line to stay to the left next to the dots icon instead of moving due to divs width expanding</span>
      </li>
      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want all the text and dates in this line to stay to the left next to the dots icon instead of moving due to divs width expanding</span>
      </li>
      <li>
        <div class="dragdotsicon"></div>
        <span class="t-Date">05.18.16</span> 
        <span class="t-ShortDesc">I want all the text and dates in this line to stay to the left next to the dots icon instead of moving due to divs width expanding</span>
      </li>
    </ul>
  </div>
  <div class="column_60 right_half">
    <h2 class="column_title">RIGHT COLUMN</h2>
  </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

"Strategically placing elements on an HTML grid

My current project involves creating a grid layout in HTML using CSS. The goal is to use this layout for various elements such as images, text, and links. What I envision is a visually appealing grid where each object fits together seamlessly with no gaps ...

javascriptjqueryhtmlcss

Loop through an HTML table in order to emphasize variations in cells that contain multiple comparison items

I am interested in highlighting variances between the initial row of a table and all other rows based on columns. I have successfully managed to achieve this when each cell contains only one item/comparison. However, I would like to expand this to include ...

javascripthtml

Presentation - hyperlink only functioning for final slide

I have a question about Lean Slider, which you can check out at My goal is to link each slide to a different URL. However, I'm facing an issue where only the code in the last slide seems to be executed and applied to all other slides. For example, if ...

javascriptjqueryhtmlslideshow

What steps can be taken to ensure the CSS/HTML image aspect ratio remains consistent on various monitors?

My square-shaped image (1:1 aspect ratio) is displaying differently across various devices when I use the codes below. While some show it as a perfect square, others display it as a rectangle. Is there a solution to maintain the original aspect ratio consi ...

htmlcss

How can one get rid of a sudden strong beginning?

Recently, I delved into the world of CSS animation and encountered a frustrating issue. I've tried numerous methods and workarounds to achieve a smoothly looping animation without interruptions. Despite my efforts, I have not been able to replicate th ...

javascripthtmlcsscss-animationscss-animation-direction

TabContainer - streamline your selection process with inline tabs

I am currently working on a GUI that includes a TabContainer with two tabs, each containing a different datagrid. I initially created the tabcontainer divs and datagrids declaratively in HTML for simplicity, but I am open to changing this approach if it wo ...

javascripthtmlcssdojo

Trouble displaying certain HTML code and its output on the browser?

I am in the process of developing a user profile page. I have designed a form with various fields, but the code within the section is not displaying correctly in the browser. I attempted to inspect the elements, but the code within that section remains inv ...

htmlcss

Page not found: unique error on alternate route

My website has different paths and pages in hbs format, such as root, help, and 404. The problem arises when I navigate to localhost:3000/wrong, the site displays correctly, but when I try localhost:3000/help/wrong, the CSS is not applied to the 404 page b ...

cssnode.jsexpresshandlebars.js

What is the fastest way to add an email subscription form to my website without needing to configure a database?

Would it be possible to integrate a sign-up text box on our site for users interested in receiving launch notifications? Any suggestions on the most effective method to implement this feature? EDIT: Our current use of Prefinery has limitations as we cann ...

htmlcssformsemail

Implementing multiple content changes in a span using javascript

Having an issue with a pause button where the icon should change on click between play and pause icons. Initially, the first click successfully changes the icon from a play arrow to a pause icon, but it only changes once. It seems like the else part of the ...

javascripthtml

Show full-screen images on click using Ionic framework

Currently, I am working on developing a mobile app using the Ionic framework. I have created a layout that resembles the one shown in this Card Layout. My question is: How can I make the card image display in full screen when clicked by the user and retur ...

javascripthtmlangularjsionic-framework

The video is not appearing on mobile devices using Safari, Firefox, and Chrome, but it is displaying properly on desktop computers

My website has a video in the header that works fine on desktop but not on mobile. I am using next.js 13.4 and here is my code: <video id="background-video" autoPlay playsInline loop muted classN ...

javascripthtmlreactjsnext.jsfrontend

Ways to showcase information from an angular service

I'm struggling with displaying data from a service in my HTML view using AngularJS. My goal is to show a list of submitted forms called Occurrences in the view. When clicking on a list item, I want to be able to view all the data fields submitted thro ...

javascripthtmlangularjsservicecontroller

Using Javascript to dynamically add form fields based on the selection made in a combo box

I am in the process of creating an information submission page for a website, where various fields will need to be dynamically generated based on the selection made in a combo box. For example, if the user selects "2" from the combo box, then two addition ...

phpjavascripthtmlvalidation

Anti-aliasing with @font-face in Internet Explorer versions 7 through 9

Having some trouble getting @font-face to display correctly in IE, and I haven't found a solution yet. I've looked into this resource: but unfortunately it didn't work on my Windows 7 IE. Does anyone have a better suggestion? ...

cssfont-face

What is the best way to save variables in PHP for later use in various scripts?

As a newcomer to PHP programming, I am facing a rather simple issue that I haven't been able to solve despite trying various methods and searching online for a solution. Any assistance you can provide would be greatly appreciated. The problem at hand ...

phphtmlmysqlvariablesglobal-variables

Unusual addition symbols in the Bootstrap stylesheet

Something unusual is occurring in my bootstrap css code. I am noticing strange plus signs that seem out of place, and I cannot pinpoint a reason for their existence. Here's an example (you might need to enlarge the view as they are quite small): Thi ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Strange image movement occurs when utilizing jQuery slideDown and slideUp

My HTML structure is as follows: <div class ='profileName'> <hr> <span class='name'>Content</span> </div> <div class ='profile'> <div class='floatRightImg padded'> < ...

jqueryhtml

Unable to pinpoint the source of the excess spacing within a form field

There appears to be some extra space in the text field of my form, extending beyond the container margin. Please refer to the image and JSFiddle http://jsfiddle.net/GRFX4/. Any thoughts on what might be causing this issue? Thank you. HTML: <div id="co ...

htmlcss

Is it possible to adjust the range of a range slider based on the selection of a radio button or other input method?

I have a query and I’m hopeful you can assist: function UpdateTemperature() { var selectedGrade = $( "input[name='radios']:checked" ).val(); $( ".c_f" ).text(selectedGrade); var value1 = $("#tempMin").val(); var value2 = $("#tempM ...

javascriptjqueryhtmlcssmaterialize