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

Prevent sticky div from overlapping with footer

I currently have a social link menu that is fixed to the left side of my page, structured like this: <footer id="colophon"></footer> <div> <nav> <ul id="social"> <li>Link1</li> ...

javascripthtmlcss

Using Javascript to Highlight a Single Row in a Table

Greetings esteemed members of the skilled community at StackOverflow, I must humbly ask for your expertise in solving a dilemma that I am currently facing. The situation is as follows: I have a table generated from an SQL query, and it is crucial for the ...

javascripthtmlhtml-table

Issues with the Textarea StartsWith Function Being Unresponsive

Attempting to use the startsWith function on a textarea, but it seems like there may be an error in my code. Since I am not well-versed in Javascript, please forgive any obvious mistakes. I did try to implement what made sense to me... View the Fiddle here ...

javascriptjqueryhtmltextareastartswith

Event object not being passed to function in UIWebView Javascript onclick event

When inserting HTML dynamically using simple NSStrings and then loading it into a UIWebview, the following approach is taken: [NSString stringWithFormat:@"<div onclick=\"MyClickEvent(e);\"....some more text here"> A function is defined li ...

javascripthtmliosuiwebviewdom-events

Excessive content and the upper limit of height

I'm in the process of creating a scrolling table with a maximum height, and here's what I've done so far: <table> <tbody style="height: 300px; overflow:auto;"> //php for loop to populate table with <tr>s/<td>s </t ...

htmlcss

Attempting to apply the 'Tw Cen MT Condensed Extra Bold' typeface using CSS styling

I'm having trouble getting the 'Tw Cen MT Condensed Extra Bold' font to work in my website header. Even when I try to style it with bold, it just doesn't look right. I created the banner in Photoshop and now I want to recreate the text ...

htmlcssfonts

What is the process for extracting the value of a checkbox generated through JavaScript?

I recently came across a helpful post on Stack Overflow that provided sample code demonstrating how to display multiple list of checkboxes dynamically on a dropdown list. The function in the code was exactly what I needed for my webpage. However, I encount ...

javascripthtml

My objective is to show the div element just once using AngularJS

Here's the scenario I want to show this div just once, not multiple times: //angular js code $scope.arr=["sunday","mpnday","tuesday"]; //html view <ul> <li ng-repeat="x in arr"> <div><p>{{ x }}</p> </div> & ...

javascripthtmlangularjs

rectifying file extension hyperlinks

While designing a webpage on my MacBook's local server, I unintentionally omitted the ".css" file extension in the href attribute of a link to my locally stored stylesheet. The mistake went unnoticed until I transferred my files to an externally hoste ...

htmlhostingwebserver

Using ReactJS to strip HTML tags from JSON response

I'm having trouble figuring out how to strip HTML tags from a JSON response in reactjs. Here's the JSON response: { "price": "26,800.98", "diff": "<!--daily_changing-->+13.44 (+0.05%)&nbsp;& ...

javascripthtmljsonreactjstags

Issues arising when trying to generate HTML email content from a document

Looking to send an HTML email using Python, argparse, and the command line. I want to insert content from an HTML file directly into the email body rather than just attaching the file. So far, my attempts are only resulting in the HTML file being attache ...

pythonhtml

Show a background picture while hovering on the main image

Is there a way to make the background image appear when hovering over the original image and disappear when no longer hovering? Below is a snippet of my HTML and CSS. Is there a straightforward CSS command to hide the original image or show the background ...

htmlcss

Learning the Basics of CSS: Understanding the Difference Between Float and Liquid Layout

What sets apart a float layout from a liquid layout? ...

cssterminology

Guide to incorporating flash into a form similar to the method used on http://www.mediafire.com

I'm looking to integrate a flash upload feature into my index file, but I'm not sure how to do it. Here is the link to the flash uploader: . I want it to work similar to how uploading works on when you click on UPLOAD. Thank you for any assistan ...

phpjquerycssflash

Adjusting table font dynamically using Angular and CSS

I am currently working on an Angular project and facing a challenge with setting the font size dynamically in a table. I have created a function to address this issue, which includes the following code snippet: $('.td').css({ 'font-size ...

cssangular

Using Javascript to Trigger Events on Selection

I have a unique situation: 1) One of my dropdown's choices features various car names. 2) Another dropdown has two options: When selecting each option in the second dropdown, the following should occur: a) Choose UserInput - This action will hide ...

javascriptjqueryhtmlcss

Utilize varying sizes within a single column using Bootstrap

I am struggling to create a heading that spans the entire width of my listview within Bootstrap. Despite being in the same column, the heading does not extend as far as the listview. I desire for the title to stretch all the way across the list, leading m ...

csstwitter-bootstrap

Ensure that bulleted lists and numbered lists are aligned to the left side

Check out this website where the ordered and unordered lists are not aligned correctly. The ideal alignment would have the bullets (or numbers) left aligned. For instance, the number "1." should be aligned to the left on the same line as the heading "Per ...

css

Steps to create a div with a z-index of 1 that fills the entire height:

Looking at the image, I have a sidebar that opens over other elements (blue color) using z-index = 1. When the sidebar is open, I want to hide all other elements except for the sidebar. However, towards the end of the sidebar, I can still see other element ...

htmlcss

Is there a way to ensure that the column widths in the Huxtable RTF output align perfectly with the widths of the HTML

It appears that the HTML output in huxtable has a column width setting that automatically adjusts to fit the content, creating an aesthetically pleasing output. On the other hand, the RTF output makes all columns equal width, which is not as visually appea ...

htmlrrtfhuxtable