Align text in a vertical manner within various containers

I'm encountering a puzzling issue with my side-by-side divs. I have different-size headers in each div, and I want the top header in each to be baseline aligned. Unfortunately, using vertical-align: baseline doesn't seem to work between the two divs. Below is an excerpt of my code (written in sass):

.about-page-column {
  display: inline-block;
  vertical-align: top;
  width: 49%;
  margin-top: 5px;
  text-align: center;
  padding: 5px;

  h3,h4 {
    padding: 5px;
    vertical-align: baseline; // this line seems ineffective
    font-family: 'Rubik', sans-serif;
    text-decoration: underline;
    color: $page-title-color;
  }

  h3 {
    font-size: 2em;
  }

  h4 {
    font-size: 1.5em;
  }
}
<div>
  <div class="about-page-column">
    <h3>Experience</h3>
  </div>
  <div class="about-page-column">
    <h4>Links</h4>
  </div>
</div>

The headers are currently aligning by their tops due to floating to the top of the vertical-align: top divs.

Could anyone advise on a method to align the headers within their respective divs so they are vertically aligned by their baselines? Alternatively, if this isn't possible, do you know of any effective workaround?

Your help is greatly appreciated!

htmlcss

Answer №1

To create a flexible layout, I recommend using a flex-container. Your first div should look like this:

<div class="flex-container">
  <div class="about-page-column">
    <h3>Experience</h3>
  </div>
  <div class="about-page-column">
    <h4>Links</h4>
  </div>
</div>


.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Remember, if you set the flex-direction to column, the functions of justify-content and align-items will swap.

For more information about flexbox, check out these resources:

MDN Web Docs - Flexbox

W3Schools - CSS Flexbox

Answer №2

If you're looking for a solution, this piece of code may be just what you need. It ensures that the bottom of each heading is aligned, although keep in mind that the underline will vary depending on the font size.

<div class="headers">
    <div class="about-page-column">
        <h3>Experience</h3>
    </div>
    <div class="about-page-column">
        <h4>Links</h4>
    </div>
</div>

.headers {
    display: flex;
    align-items: baseline;

    .about-page-column {
        display: inline-block;
        vertical-align: top;
        width: 49%;
        margin-top: 5px;
        text-align: center;
        padding: 5px;

    h3,h4 {
       padding: 5px;
       font-family: 'Rubik', sans-serif;
       text-decoration: underline;
       color: $page-title-color;
    }

    h3 {
       font-size: 2em;
    }

    h4 {
        font-size: 1.5em;
    }
}

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

Navigating the website with curtain.js and anchor tags

Currently, I am working on a website located at www.TheOneCraft.co.uk. I have incorporated the curtain.js jQuery plugin to create animated slide/pages as users scroll down. However, I have been unsuccessful in making the navigation bar follow this animati ...

javascriptjqueryhtmlcss

Dynamically modifying the styling of elements within an iframe

In my current project, I encountered a challenge with changing the background color to black and the body text color to white within an iframe. Additionally, all elements that are originally styled with black in an external stylesheet also need to be chang ...

javascripthtmlcssdomiframe

One column stretching all the way to the window's edge while the other column stays contained within its container

Looking to design a two-column layout where the left column takes up 40% of the container and aligns with it, while the right column expands all the way to the window edge. I managed to achieve this using position:absolute, but I'm curious if there&ap ...

htmlcsslayout

"Troubleshooting a Responsive Design Problem: Horizontal Scroll Bar Appears on Low Res

My website is experiencing an odd issue with responsiveness. When viewed on desktop resolution in Chrome, there is no horizontal scroll. However, when I resize the browser to lower resolutions (400px width and less), the horizontal scroll appears. It see ...

csswordpressresponsive-design

The nested navigation link disappears suddenly on Internet Explorer 9

This query closely resembles another issue: Nested menu keeps vanishing on IE 8 & 9. However, the solution provided is quite limited. Why do my nested menus disappear before I can reach them with my cursor unless I move it swiftly? This peculiar behavi ...

cssinternet-explorer-9nav

The vertical shift in one of the inline table cell DIVs is being caused by two of them

I've been searching for a solution to my issue, but have come up empty-handed. I apologize if this has already been discussed before. My HTML page contains a section that appears as follows: <div id=wrap> <div id=lb> Content ...

htmlcsscss-tables

Switch between different classes with JavaScript

Here is the code that I am working with: This is the HTML code: <div class="normal"> <p>This is Paragraph 1</p> <p>This is Paragraph 2</p> <p>This is Paragraph 3</p> <p>This is Paragraph 4&l ...

javascripthtmlcss

Showing data in table cells using CSS styling

I am working with multiple HTML tables that contain embedded Ruby code. The structure is as follows: <% loop-1 %> <table> <tr> <td rowspan=" X ">abcd</td> <td>xyz</td> </tr> <% loop- ...

htmlhtml-table

Transmit HTML message using the "textarea" tag through email

Whenever I try to send the content of my "textarea" via email, it always ends up being sent as a blank message. How can I fix this issue? Below is my PHP code: <?php $input = json_decode(file_get_contents("php://input"), true); $ToEmail = "<a href ...

javascriptphphtmljson

Enhance the numerical worth of the variable through the implementation of the function

I'm working on a JavaScript timer but I'm struggling with assigning the value of a parameter to a global variable. Currently, I can achieve this without using parameters, but I really want to streamline my code and reduce the number of lines. He ...

javascripthtmlfunction

What Is Preventing Fields from Being Filled in the Drop-Down Menu?

Looking to achieve this outcome: https://jsfiddle.net/nstruth/t0dopzav/1/ The issue I'm facing is that the HTML appears correctly when Volvo is selected, but the JavaScript is not functioning as expected. Despite reviewing similar innerHTML JavaScrip ...

javascripthtmljquerycssjquery-select2

Using jQuery to Toggle Visibility of Table Rows

I'm facing a challenge in creating a basic table layout where all the table rows are initially hidden when the document loads. The goal is to display specific rows when a corresponding button is clicked, but my current implementation doesn't seem ...

jqueryhtml

Solving regex issues within PHP

<div class="start">...</div> Is there a way to extract the content within <div class="start"> using PHP? I am looking for a regular expression solution that is capable of handling nested scenarios. ...

phphtmlregex

How can I modify the color of a hover button?

How can I change the color of a link on hover? The code I tried is not working properly. Below is the CSS snippet I have already added: a:hover {color: red;} ...

htmlcss

What are the signs that an element was visible on screen prior to navigation?

Recently, I incorporated SlideUp and SlideDown jquery animations into my website. You can check it out by visiting (click the >>>). However, I noticed a small issue where when users navigate to a new page, they have to re-SlideUp the element that was sl ...

javascriptjqueryhtmlcss

Dynamic content cannot have classes added to them using jQuery

When adding content dynamically, it is necessary to use an event handler for a parent element using on(). However, I am facing an issue where the class added with addClass on dynamically generated content disappears immediately. Let's take a look at ...

javascriptjquerycssajax

Tips for sending PHP variables together with a Typeahead variable

I have simplified this code as much as possible. I have a typeahead variable that is functioning correctly. However, I also need to pass two unrelated variables $php_var1 and $php_var2 along with the typeahead variable. These PHP variables are initialized ...

javascriptphphtmlajax

JavaScript fails to function in an HTML file

I am facing an issue where my JavaScript code works perfectly in JSFiddle, but when I copy it into an HTML file, it doesn't function as expected. Despite searching through other related posts, I have been unable to find a solution for this specific pr ...

javascriptjqueryhtml

Float over Material UI Icon and Text

Currently, I am tackling a React JS Project. My task involves creating a breadcrumb that contains both text and an icon. To accomplish this, I have incorporated a material UI icon. import UpdateIcon from "@material-ui/icons/Update"; ...

cssreactjsmaterial-ui

Distinguishing Design with CSS3

Here is the code snippet I am using: <table width="562" cellspacing="0" cellpadding="0" border="0" align="center" class="genericClass"> (nested tags are here) </table> These are the related styles in my stylesheet: table.genericClass a ...

htmlcss