Position the div alignment to the top within the table cell

I'm having trouble aligning the div under the header to the right. Here is my HTML code and a photo for reference:

HTML Code:

          <td>
            <div class="schedule-content">
              <div class="timestamp">
                <h3>00:00 - 00:00</h3>
                <ul>
                  <li>Name1</li>
                  <li>Name2</li>
                  <li>Name3</li>
                </ul>
              </div>
            </div>
          </td>

My CSS:

#schedule .schedule td .schedule-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#schedule .schedule td .timestamp {
  background-color: #fff;
  height: auto;
  width: 95%;
  border-radius: 10px;
  padding: 0.5rem;
  margin: 0.4rem 0;
}

View Problem

Answer №1

To align items at the start, apply "align-items: flex-start;" to the elements within .schedule-content

Answer №2

Resolved the issue by including this css for the td element:

td {
  vertical-align: top;
}

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

Every time Tailwind compiles, it seems to generate a glitchy class

There was a time when I accidentally wrote 2 classes without a space max-w-[412px]mb-[36px]. This caused an error, so I added a space between the classes. However, the error persisted even after making this correction. In a last attempt to resolve the issu ...

barchart rendered in SVG without the use of any external libraries

Creating a stacked barchart with SVG and HTML without relying on any third-party library has been quite a challenge. Despite searching extensively online, I have not come across a single resource that demonstrates how to build a stacked bar chart using pla ...

Time to reverse the string

I currently have a timestamp formatted like this: Thu Sep 12 04:28:37 +0000 2013 While I am aware that PHP's strtotime function allows for inputting things like '2 days ago' or 'last week', my goal is to take the existing timesta ...

JSP generates unconventional HTML output

I'm encountering a strange issue with one of my JSP pages. It seems like the HTML is not being fully rendered. The output looks like this: <html> ... <table> ... </table> <div id= So, the last line is exactly what ...

Click to position custom text on image

Is there a way to adjust the position of text on an image after it has been clicked? I have included an image below to demonstrate how I would like it to appear: https://i.stack.imgur.com/unmoD.png function revealContent(obj) { var hiddenText = obj. ...

Reorganizing Bootstrap 5 columns as the screen size changes

I need to change the display order of columns in bootstrap Currently I have two columns side by side in one row like this: Col A - Col B (on all screens except mobile devices) However, when the screen size is reduced or viewed on a mobile device, I want ...

Tips for avoiding background-image zoom on mobile browsers when stacking elements vertically:

Within my ReactJS application, I have implemented a feature where elements are added vertically from top to bottom when the "Post" button is clicked. These elements display correctly on both mobile and desktop browsers. However, there is an issue when vie ...

Utilize custom {tags} for replacing strings in a CSS file using str_replace in PHP

My code consists of a script that updates a CSS file based on user input from an html form. The script executes a str_replace function, scanning the CSS file for specific "tags". For example: html,body { background: {bgcolor} url(../images/bg.jpg) re ...

Space within a series of photographs

Looking for some assistance: I am trying to maintain a consistent margin of 10px between posts and between photos in a photoset. However, when a post is a photoset, the margins of the bottom photo and the overall post add up to 20px. I want to retain the ...

Clicking on the background does not alter the onclick function

Can anyone help me troubleshoot my code? My function load() isn't changing the background of .firstDiv for some reason. I've checked multiple times but I can't seem to spot any errors. function load() { document.getElementsBy ...

Understanding the Code for Responsive Web Typography with line-height in ems

I am currently trying to delve into the CSS calculation process behind the styling in the code snippet provided. This code snippet is from a responsive WordPress theme, and I am struggling to decipher how the em values for the line-height of the <h> ...

Can you explain the distinction between using element~element versus element+element?

Can you explain the variation between these two CSS selectors? When using them, I seem to receive the same outcome. In the HTML: <div>One</div> <p>Two</p> CSS Example #1: div+p { background:red; } This code assigns a red backgr ...

Activate hover effect on toggle button

When I hover over the "CHANGE" button, the orange color appears as expected. Clicking the button once turns the color red but removes the hover color, which is fine. However, clicking it twice brings back the original blue color but the hover effect is m ...

The styling in Docker for Asp.Net Core is not being properly displayed

I recently deployed my first ASP.NET Core application using Visual Studio for Mac inside a Docker container on Linux. However, I'm facing an issue where the CSS is not being applied and the JavaScript is not functioning as expected. It seems like the ...

Divs expanding below content in IE on a particular server

Currently, I am facing an issue with a JavaScript div that expands correctly over other content in most situations but goes under the content in one specific scenario. I am unsure about where to begin debugging this problem. To provide some context, the d ...

What is the best way to extract all image URLs from a website using JavaScript?

There are various methods to retrieve image src urls using JavaScript, such as utilizing document.images or by targeting all img elements and fetching their src attributes. However, I am currently unable to extract the image urls specified within CSS styl ...

What is the best way to show the response data in an input text field within an HTML form?

I'm new to working with node.js and I've encountered an issue. I need to display the data of the currently logged in user in input fields. With the following code, I can access the data of the logged-in user and display it on the console: See O ...

"Aligning two images side by side in a horizontal

[enter image description here][1]I am trying to place two images on my website, but I am struggling to vertically align them properly. I have attempted using line-height and vertical alignment, however, I cannot seem to pinpoint the issue or identify any m ...

Utilizing ngx-bootstrap Modal for Data Transfer to Component

I am currently dealing with an array called drivers in my component. When a button is clicked in the component, it triggers a ngx-bootstrap modal to display the fullname value from the drivers array. Now, I am looking for a way to retrieve the selected nam ...

Convert the canvas to an image by right-clicking

Is it possible to treat the canvas element as an image when using drawImage() to draw on it? When I attempt to right click on the canvas element that has been drawn on, the option "Save image as" does not appear. The right click menu displays: What step ...