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

Utilizing HTML form action to link to a PHP script located in a separate folder

My journey begins here Main: Members/name.html search.php Members is a directory containing my html code in name.html <form action="../search.php" method="get"> <div> &l ...

Differences in layout design when using floats and display: table between Chrome and Firefox can affect the visual appearance

Try out this link on JS Fiddle: https://jsfiddle.net/7p81bnto/2/ Here's the HTML code: <body> <main> <div> <div style=" height: 50px; width: 200px; ...

"Is it possible to move the text on the canvas by dragging it to where you want it to be

Seeking help again after an unsuccessful attempt. How can I allow the user to add text to the canvas by dragging it to their desired location? For example, if they input text somewhere, it should appear on the canvas and then be draggable to any position ...

Interactive email with a dynamic dropdown feature

I am currently working on creating an HTML email that can display data depending on the selection made from a dropdown menu within the email itself. Despite my research, I have not come across a suitable solution for this specific scenario. My current app ...

Attempting to emphasize within this particular section

Is there a way to make the title in this column appear bold? I tried specifying the style as bold, but it just vanished. Is there a method to achieve this within this column? [column parallax_bg="disabled" parallax_bg_inertia="-0.2" extended="false" ex ...

Tips for positioning the popup ul in relation to its parent li

How can the pop-up ul be positioned in the center of the parent li using CSS? * { margin: 0; padding: 0; } #track-nav { margin-left: 50px; margin-top: 50px; float: left; width: 100%; list-style: none; font-weight: bold; margin-bottom: ...

centering an angular material card on the webpage

Currently, I have developed a Registration script that enables users to Sign Up on my website. However, the issue I am facing is that the angular material card, which houses the sign up interface, is not centered. Despite trying various methods such as & ...

Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements havi ...

How do I utilize AJAX and HTML to invoke a RESTful web service in Java?

How to call a RESTful webservice in Java using HTML Ajax? I have created a simple webservice in Java and want to POST data into a database using HTML Ajax by calling a Java webservice in Eclipse. However, I encountered an error in my Java program. How can ...

Converting JSON information into a mailto hyperlink

Can anyone help me figure out how to encode a mailto link properly with JSON data in the query parameters, ensuring that it works even if the JSON data contains spaces? Let's consider this basic example: var data = { "Test": "Property with spaces" ...

What is the best way to cut out a portion of a div using CSS?

I have a scaled down version of my project, but it's not quite what I need. I would like the green div to have some transparency so that the content behind both divs is visible (there is none in the example, but there is in my actual project). However ...

What steps can I take to prompt this function to modify the value of my input?

After recently delving into the world of JavaScript, I decided to create a background color generator that randomly changes when a button is clicked. This simple project involves two input fields (color1 & color2) which receive random values upon clicking ...

Setting the initial height of a textarea dynamically by binding it to the content with knockout data-binding

I need help with a JavaScript solution for expanding and collapsing the height of a text area on keyup event, while also initializing its height when a value is bound to it via a knockout custom binding. Any ideas on how to achieve this without using jQuer ...

Creating an HTML element that can zoom, using dimensions specified in percentages but appearing as if they were specified in pixels

This question may seem simple, but I have been searching for an answer and haven't found one yet. Imagine we have an HTML element with dimensions specified in pixels: <div style="width:750px; height: 250px"></div> We can easily resize i ...

Step-by-step guide for making a CSS triangle design that is compatible across different browsers

Here's a common CSS code for creating a CSS triangle: display: inline-block; vertical-align: middle; content: " "; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 6px solid black; width: 0; height: 0; Click here ...

Inserting a pause between a trio of separate phrases

I am dealing with three string variables that are stacked on top of each other without any spacing. Is there a way to add something similar to a tag in the ts file instead of the template? Alternatively, can I input multiple values into my angular compo ...

JavaScript code encounters a math calculator script error

Am I overlooking something in my script? Everything seems to work fine when I click the minus (-) button, but when I press the plus (+) button, the calculator malfunctions. It displays 1, 11, 21, and so on, all ending with 1... Here is my code: functi ...

Issues encountered when incorporating personalized CSS into a Vuetify element

Working with the Vuetify selector input component, v-select, and wanting to customize its style led me to inspecting it in Chrome and copying down the necessary classes. For instance, to change the font size of the active value, I utilized: .v-select__sel ...

Encountering difficulties with the mobile display of a Wordpress theme

I am currently working with the megashop theme on WordPress and I have a few queries that need addressing: Is there a way to modify a specific setting exclusively for views smaller than desktop size, without impacting the desktop view? For example, the m ...

Collecting all the <td> elements within a single row

I am having trouble creating a table dynamically using JSON data. The issue is that all <td> elements are being placed in the same <tr> instead of two separate rows. Here is my JavaScript code: $('button').click(function() { var str ...