Arranging CSS text in a parallel format and aligning it vertically

I am working on a layout with two columns of text placed side by side, where one column is right aligned and the other is left aligned.

Below is my current code:

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}
<ul class="store-opening-hours list-unstyled">
  <li>
    <div style="text-align:left;">
      Monday

      <span style="float:right;">9:00 AM - 5:00 PM</span>
    </div>
  </li>
  <li></li>
  <li>
    <div style="text-align:left;">
      Tuesday
      <span style="float:right;">9:00 AM - 5:00 PM</span>
    </div>
  </li>
  <li></li>
  <li>
    <div style="text-align:left;">
      Wednesday
      <span style="float:right;">9:00 AM - 5:00 PM</span>
    </div>
  </li>
  <li></li>
  <li>
    <div style="text-align:left;">
      Thursday
      <span style="float:right;">8:30 AM - 11:00 AM</span>
    </div>
  </li>
  <li>
    <div style="text-align:right;">
      12:30 PM - 2:00 PM
    </div>
  </li>
  <li>
    <b>
    <div style="text-align:left;">
                Friday                
    <span style="float:right;">9:00 AM - 2:30 PM</span>
    </div>
    </b>
  </li>
  <li>
    <b>
    <div style="text-align:right;">
            6:00 PM - 9:00 PM
        </div>
    </b>
  </li>
  <li>
    <div style="text-align:left;">
      Saturday
      <span style="float:right;">9:00 AM - 5:00 PM</span>
    </div>
  </li>
  <li></li>
  <li>
    <div style="text-align:left;">
      Sunday
      <span style="float:right;">Closed</span>
    </div>
  </li>
  <li></li>
</ul>

Check out the Jsfiddle link here JsFiddle link.

The display appears as two columns side by side, but the right-aligned text is not vertically centered, you can see this in the image provided below:

https://i.stack.imgur.com/4Lrkd.png

Any ideas on how I can achieve proper vertical alignment for the text?

htmlcss

Answer №1

You may want to consider using a table format for displaying the information:

<table>
  <tr>
    <td width="200">Monday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td>8:30AM - 11:00AM</td>
  </tr>
  <tr>
    <td rowspan="2"><b>Friday</b></td>
    <td><b>9:00AM - 2:30PM</b></td>
  </tr>
  <tr>
    <td><b>6:00PM - 9:00PM</b></td>
  </tr>
  <tr>
    <td>Saturday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Sunday</td>
    <td>Closed</td>
  </tr>
</table>

Here is a visual representation of how the table will look:

<table>
  <tr>
    <td width="200">Monday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td>8:30AM - 11:00AM</td>
  </tr>
  <tr>
    <td rowspan="2"><b>Friday</b></td>
    <td><b>9:00AM - 2:30PM</b></td>
  </tr>
  <tr>
    <td><b>6:00PM - 9:00PM</b></td>
  </tr>
  <tr>
    <td>Saturday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Sunday</td>
    <td>Closed</td>
  </tr>
</table>

Answer №2

Have you considered utilizing the table property for displaying content?

.list-unstyled {
  display: table;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.list-unstyled li {
  display: table-row;
}

.list-unstyled li .weekday {
  display: table-cell;
  width: 400px;
  text-align: left;
  vertical-align: middle;
}

.list-unstyled li .time {
  display: table-cell;
  width: 200px;
  text-align: left;
}
<ul class="store-opening-hours list-unstyled">
  <li>
    <div class="weekday">
      Monday</div>

    <div class="time">9:00 AM - 5:00 PM
    </div>
  </li>
  <li>
    <div class="weekday">
      Tuesday
    </div>
    <div class="time">9:00 AM - 5:00 PM
    </div>
  </li>
  <li>
    <div class="weekday">
      Wednesday
    </div>
    <div class="time">9:00 AM - 5:00 PM</div>
  </li>
  <li>
    <div class="weekday">
      Thursday
    </div>
    <div class="time">8:30 AM - 11:00 AM<br>12:30 PM - 2:00 PM</div>
  </li>
  <li>
    <div class="weekday">
      <strong>Friday</strong>
    </div>
    <div class="time">9:00 AM - 2:30 PM<br><strong>6:00 PM - 9:00 PM</strong></div>
  </li>
  <li>
    <div class="weekday">
      Saturday
    </div>
    <div class="time">9:00 AM - 5:00 PM
    </div>
  </li>
  <li>
    <div class="weekday">
      Sunday
    </div>
    <div class="time">Closed
    </div>
  </li>
</ul>

Answer №3

One way to achieve this is by using span classes for the timing and days sections with fixed widths to ensure proper alignment of text.

<ul class="store-opening-hours list-unstyled">
    <li>
        <div>
            <span class="days">Monday</span>
            <span class="timings">9:00 AM - 5:00 PM</span>
        </div>
    </li>
    ...
    ...
</ul>

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.days {
    width: 75%;
    float: left;
    text-align: left;
}

.timings {
    width: 25%;
    float: right;
    text-align: left;
}

Check out the working code 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

The third @media query for max-width is not functioning as expected in the CSS

Looking to create a responsive card section on my website for various screen sizes. The goal is to display 5 cards per row when the screen width is greater than 1300px, maintain 3 cards per row from 1024px to 1300px, and then switch to only 2 cards per row ...

htmlcssresponsive-designmedia-queries

Making the child element expand to the full width of its parent while maintaining an overflow-x:auto property

Is there a way to stretch a child div without specifying fixed widths? Even when trying to wrap items and child in one wrapper div, the child div always takes up 100% width. Not full horizontal width. Thank you. .parent { background: skyblue; widt ...

css

I possess a compilation of URL links and I am seeking to identify the specific HTML div that corresponds to each URL within a webpage

Could you please help me figure out which HTML div each URL belongs to on a webpage using Java? I have a list of URLs that need to be matched with their respective HTML divs. ...

javahtmljsoup

Transform a div's style when hovering over another div using absolute positioning without repetition

I am facing an issue with multiple divs positioned absolutely on top of a primary div with relative positioning. I want one specific div to change its background-color when hovering over another div within the same parent div. Though I know about ad ...

javascriptjqueryhtmlcss

What are the various methods for incorporating icons and logos into website design?

Can anyone provide insights on the quality of logos and icons used in professional websites? I often create logos and icons using Illustrator, but when comparing them to icons on websites like those shown in the provided image and links, mine appear blurry ...

htmlcssimagegraphicsweb

The default action is not triggered when the click event occurs

Hey there, I have been working on this <ol> list of events using jQuery (version 1.4.2). Everything is set up within the $(document).ready() function. Something strange is happening where when I click on the <li>, it triggers a click on the co ...

javascriptjqueryhtmlevents

Access the content of each cell in a table using JavaScript

I need help with a scenario involving a table that has 4 rows, where the 4th row contains a textbox. When the "onchange" event of the textbox is activated, I want to retrieve the data from the cells in that specific row and transfer it to another table. It ...

javascripthtml

Firefox compatibility issue caused by jQuery's appendTo function disrupting hyperlink functionality

I've successfully implemented the material design ripple effect using jQuery, which functions well in IE11 and Chrome 46. However, I've encountered an issue in Firefox 39 where applying the effect to links prevents redirection. Upon investigation ...

javascriptjqueryhtmlfirefox

Challenges arise with the safari navigation bar within a PWA platform

Struggling with the formatting and spacing issues of a PWA application on IOS devices due to notches and navbar heights. One specific problem is that a chat input with absolute positioning and bottom: 0 does not display properly in Safari because of the n ...

htmlcssprogressive-web-apps

How can you modify the color of a FontAwesome icon?

I am currently utilizing BigCommerce and my code looks like this: .icon-cart { color: #4ca3c0 !important; } .icon-cart a{ color: #4ca3c0 !important; } Despite the above, it seems that the icon's color remains unchanged. Any suggestions or i ...

htmlcssbigcommerce

The eval() function does not run scripts from external sources with a src attribute

Instead of using eval() to execute all <script> tags after completely rewriting a div, I have encountered an issue. The following code snippet works for inline-scripts, but it doesn't have the same effect on external scripts like: <script sr ...

javascriptjqueryajaxhtml

What is the best way to receive detailed error messages from the LESS compiler when using it in Symfony 2?

I have successfully implemented dynamic compilation of LESS scripts to CSS in Symfony 2 by following this guide: However, I am facing an issue where if there is an error in a LESS script, the compilation fails and no CSS is generated for the browser. Is t ...

csssymfonyless

Navigational strip within the grid

My grid has a size of 300px. When there are more than 10 records, a vertical scroll bar appears, which is fine. However, at the same time, a horizontal scroll bar also appears, which I do not want to display. My CSS class for vertical scrolling is: .vstyl ...

cssag-grid

Implement FluentUI Progress Component as the New Style in Blazor

Looking for a solution to remove the track from the FluentUI Progress bar, but limited to using only this library. Unable to consider alternatives. Tried applying CSS in my application to override the default style, but it seems any modifications to the c ...

c#cssblazorfluent-ui

Unexpected behavior in Bootstrap 4 table column sizing issue detected

Recently delving into the realm of bootstrap and HTML/CSS scripting, I've been working on creating a simple HTML table with one row and three columns. Each column is supposed to evenly take up one third of the table's space. However, I'm fac ...

csshtml-tableresponsivebootstrap-4dynamic-columns

Identify the element with the active class name as the primary focus

Can anyone assist with this issue? Below is an example of the code I am working with: import React, { useRef, useEffect } from "react"; function App() { const inputRef = useRef(null); useEffect(() => { const testElement = document.qu ...

htmlcssreactjsjsx

Is there a way to customize the pagination layout of primeNG paginator in an Angular project

I've been struggling to customize the primeNG paginator in my Angular application. Specifically, I am trying to style the dropdown that lets users select the number of data entries. Despite my efforts to figure it out, I have not been successful in st ...

cssangularprimengprimeng-dropdowns

What is causing the lack of response in the select box on Mac Chrome when I try to click on it?

Similar Question: JQuery function doesn't work on Chrome on Mac, but works on Chrome on Win 7 and all other browsers I am encountering an issue with a select-option list <div class="social-option"> <select name="hex_theme_options[soc ...

javascriptjqueryhtmlmacos

Can a website be designed to load a specific font for mobile phones, such as Arial Black for iOS?

Although the font Arial Black is commonly available on both Mac and PC systems, it is not accessible on iOS devices. Is there a way for a webpage to implement CSS techniques or tricks (such as assigning a class like "mobile" or "ios" to the body element), ...

htmlcssiphonewebfonts

Result of mixing CSS colors

Is there a way to retrieve the result of blending two colors using the color-mix function? In cases where the color-mix feature is not supported, is it possible to set a fixed value instead? ...

csssass