CSS techniques for aligning content

I am currently working on designing a website template, and I have encountered an issue with positioning three individual columns that contain blocks of content. My objective is to have the first block of content in each column start at the top of their respective positions.

Let me clarify further - I aim for all content blocks in each column to align at the same starting line and extend downwards as needed. However, presently only the middle column's middle content block starts at the top line, causing the other two columns to align with its bottom line.

.main {
  display: block;
  position: relative;
  width: 1181px;
  margin: 0 auto;
  padding: 0 auto;
}
.col-one,
.col-two,
.col-three {
  display: inline-block;
  position: relative;
  margin-top: 50px;
}
.col-block-one,
.col-block-two,
.col-block-three {
  display: block;
  position: relative;
  background-color: white;
  width: 360px;
  margin-left: 15px;
  margin-right: 15px;
}
.col-one-title,
.col-two-title,
.col-three-title {
  display: block;
  position: relative;
  font-size: 24px;
  font-weight: 500;
  padding: 24px;
}
.col-one-content,
.col-two-content,
.col-three-content {
  display: block;
  position: relative;
  font-size: 18px;
  padding-right: 24px;
  padding-left: 24px;
  padding-bottom: 24px;
}
<div class="main">
  <div class="col-one">
    <div class="col-block-one">
      <p class="col-one-title">HTML Introduction, What is HTML</p>
      <p class="col-one-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-one -->
  </div>
  <!-- end of col-one -->
  <div class="col-two">
    <div class="col-block-two">
      <p class="col-two-title">HTML Introduction, What is HTML</p>
      <p class="col-two-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages. HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages. HTML is a Hypertext
        Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-two -->
  </div>
  <!-- end of col-two -->
  <div class="col-three">
    <div class="col-block-three">
      <p class="col-three-title">HTML Introduction, What is HTML</p>
      <p class="col-three-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-three -->
  </div>
  <!-- end of col-three -->
</div>
<!-- end of main -->

htmlcsspositioning

Answer №1

Employing

.col-one, .col-two, .col-three {
  vertical-align: top;

This solution will address your issue by ensuring that the content is aligned with the top line:

.main {
  display: block;
  position: relative;
  width: 1181px;
  margin: 0 auto;
  padding: 0 auto;
}
.col-one,
.col-two,
.col-three {
  vertical-align: top;
  display: inline-block;
  position: relative;
  margin-top: 50px;
}
.col-block-one,
.col-block-two,
.col-block-three {  
  display: block;
  position: relative;
  background-color: white;
  width: 360px;
  margin-left: 15px;
  margin-right: 15px;
}
.col-one-title,
.col-two-title,
.col-three-title {
  display: block;
  position: relative;
  font-size: 24px;
  font-weight: 500;
  padding: 24px;
}
.col-one-content,
.col-two-content,
.col-three-content {
  display: block;
  position: relative;
  font-size: 18px;
  padding-right: 24px;
  padding-left: 24px;
  padding-bottom: 24px;
}
<div class="main">
  <div class="col-one">
    <div class="col-block-one">
      <p class="col-one-title">HTML Introduction, What is HTML</p>
      <p class="col-one-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-one -->
  </div>
  <!-- end of col-one -->
  <div class="col-two">
    <div class="col-block-two">
      <p class="col-two-title">HTML Introduction, What is HTML</p>
      <p class="col-two-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages. HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages. HTML is a Hypertext
        Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-two -->
  </div>
  <!-- end of col-two -->
  <div class="col-three">
    <div class="col-block-three">
      <p class="col-three-title">HTML Introduction, What is HTML</p>
      <p class="col-three-content">HTML is a Hypertext Markup Language, It's a Predominant set of Markup tags which used to create design of web pages.</p>
    </div>
    <!-- end of col-block-three -->
  </div>
  <!-- end of col-three -->
</div>
<!-- end of main -->

Answer №2

align-items: flex-start

.box-one, .box-two, .box-three {
    …
    align-items: flex-start;
}

Answer №3

Include vertical-align in the css styling of (.col-one, .col-two, .col-three)

.col-one,
.col-two,
.col-three {
  display: inline-block;
  position: relative;
  margin-top: 50px;
  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

What could be the reason for the malfunction of the min value in my Material UI date textfield?

I am attempting to set a minimum date for the picker to start from, but it does not seem to be working as expected. <TextField id="date" type="date" defaultValue="2017-05-24" minDate="24/01/2019" ...

htmlreactjsinputmaterial-ui

Stop the automatic hiding of the sticky header when reaching the bottom of the page

I have implemented the position: sticky property for my website's header. However, I am facing an issue where the header becomes hidden when I scroll halfway down the page (bottom on mobile devices). Can anyone suggest a solution to fix this problem? ...

htmljquerycss

Learn the steps to initiate a Vimeo video by simply clicking on an image

I have successfully implemented some code that works well with YouTube videos, but now I am looking to achieve the same effect with Vimeo videos. Does anyone have suggestions on how to do this? I need to replace the YouTube description with Vimeo, but I&ap ...

javascriptjqueryhtmlajax

Collect the text shown in an alert message created with JavaScript

I'm currently unsure if this is achievable or not. In one of my scenarios, I aim to extract text that appears in alert boxes on external websites by including my JavaScript file. Is there a method to obtain the text content shown in an alert message ...

javascripthtml

The input fields within a "form" are not functioning correctly with Jquery

Encountering an issue with my project involving a timetable that allows for dynamically adding rows with Jquery. The following are the codes: <?php session_start(); ?> <html lang="es"> <head> <meta charset="iso-8859-1"> ...

phpjqueryhtmlformsinput

Ways to modify the data within a column for every row in a table without relying on props in Vue.js (specifically Element-ui)

I've been stuck on this issue for quite some time now. I've created a table with 3 columns, and for the first two columns, I can easily display the contents of each row using the prop property. However, for the third column, I need to display inf ...

htmlvue.jsvuejs2element-uivue-props

Take charge of Bootstrap 4 dropdown transformation class while creating a Megamenu

I am currently working on creating a Megamenu using Bootstrap 4's dropdown Component. The issue I'm facing is related to Javascript adding CSS styles with transform, such as transform: translate3d(9px, 5px, 0px); This is causing disruption in m ...

jqueryhtmlcssbootstrap-4megamenu

What is the best way to shuffle the displayed images on a website to make the order random?

I'm looking to create a unique collage using 10 image files in a folder with vanilla JS. The goal is to randomize the images within a Bootstrap container on a website while maintaining their aspect ratio by utilizing a grid layout. However, I've ...

javascripthtmlcssbootstrap-4

What is the proper way to incorporate a hashtag (#) into a PHP parameter within a URL

Currently, I am sending a PHP request to a login handler using the following URL: https://example.com/test.php?username=test123&password=hiuhsda3#24 However, I need to retain the hashtag in either the password or username along with anything that come ...

phphtmlparametersrequesthashtag

Encountering problems when attempting to effectively filter a list of products using data

<div id="prod"> <div class="content" data-brand="Andrew" data-price="1000" data-store="JCPenny">Andrew</div><br /> <div class="content" data-brand="Hill" d ...

javascripthtmljquerycheckbox

The animation loop completes and restarts from the initial keyframe

I have a CSS animation that I want to play through once and then stop at the final keyframe. However, currently it keeps returning to the initial keyframe and stopping there instead of reaching the end. The animation involves a title heading that gradually ...

csswordpresscss-animationselementorwebkit-animation

Create an HTML div element that spans the full width of the

I'm facing an issue on my HTML page where a div containing users from a chat system database is not displaying correctly. The ul li tag within the parent div is not taking up the full width as expected. Here's how it should look: http://prntscr.c ...

htmlcss

Create SCSS to style multiple CSS classes

Are there more efficient ways to create css helper classes like the ones shown below? Can I use scss to generate cleaner and better classes? Thank you. .m-1 { margin: 1px !important; } .m-2 { margin: 2px !important } .m-3 { margin: 3px !important } .m-4 ...

csssass

Instructions on creating a simple text-based menu and sub-menu without any images or graphics

I'm currently working on implementing a drop-down menu for my website, which can be found at The menu I am trying to create should appear under the Health & Fitness and Gaming sections as a text-only drop-down. I've been experimenting with s ...

htmltextdrop-down-menu

Ensuring Consistent TD Heights in Email Designs

I am currently facing a challenge in building an HTML email, specifically in ensuring that two TD elements have the same height across all email clients. Since it is a responsive email design, I have opted to separate the columns into two tables instead o ...

htmlemailhtml-tableemail-client

The right-aligned navigation bar elegantly shifts downward when it exceeds the screen width

I've been struggling to create a Right Aligned Navigation Bar with a search bar and a login icon that stay in one row on the page. No matter how I try, it keeps jumping down instead of aligning properly. Here is an image of what I'm trying to ach ...

htmlcss

Ways to create a fixed top navigation bar that adjusts content similarly to a non-fixed navbar

I'm looking to achieve a fixed navbar at the top that pushes down content when I open the collapse menu, similar to how it functions in static or regular navbars. Something like this example: (https://getbootstrap.com/examples/navbar-static-top/) but ...

javascriptjqueryhtmlcsstwitter-bootstrap

reveal one div and conceal another using Bootstrap's collapse feature

I'm not sure why it's not working. Maybe I missed some simple thing? I want to show one div when I use an icon, then hide the other div. Currently, if I click on the first icon, a div will show. But if I click on the second icon, the div will sh ...

htmlcsstwitter-bootstrap

Creating a stylish CSS button with split colors that run horizontally

Could you please provide some guidance on creating a button design similar to this one? I've made progress with the code shown below, but still need to make adjustments like changing the font. <!DOCTYPE html> <html> <head> <sty ...

javascripthtmlcss

Guide on how to modify the CSS styling of a particular <td> element when its parent contains a specific class

.webgrid-table td, th { border: 1px solid #98bf21; padding: 3px 7px 2px; } I am facing an issue where the style defined above is being applied to all td elements. However, I want to exclude the styling for a td that is within a tr element with the ...

htmlcss