Tips for aligning a title to the bottom when its length varies

I am facing a design challenge where I need to align a header with content in a different column.

The header's length can vary, so I need to figure out how to align the border-bottom consistently.

(The code snippet below is just for illustration purposes)

<div class="container">
    <div class="header-container">
        <h1>Short title</h1>
    </div>
    <div class="header-container">
        <h1>This is a much longer title title</h1>
    </div>
</div>​

.header-container 
{
    width: 200px;
    font-size: 1.4em;  
    margin: 10px 20px; 
    float: right; 
    border-bottom: 1px solid #bbb;        
}​

For better understanding, please visit

http://jsfiddle.net/bmxSY/

When dealing with a short title, the first line should be left blank. I am exploring CSS solutions for this alignment issue. One approach is to count the characters and add a margin-top, but this is not foolproof.

EDIT: The main challenge lies in aligning the header with content in a different container. Therefore, the revised HTML Markup and CSS should look more like this...

<div class="container">
    <div class="span4">
        <div class="header-container">
            <h1>Short title</h1>
        </div>
    </div>
    <div class="span8">
        <div class="header-container">
            <h1>This is a much longer title title</h1>
        </div>
    </div>
</div>​

.header-container {
    width: 200px;
    font-size: 1.4em;  
    margin: 10px 20px; 
    border-bottom: 1px solid #bbb;
    text-align: left;
}

.span4 
{
    width:60%;
    float: left;
}

.span8
{
    width:40%;
    float: left;
}

Answer №1

The simplest way to achieve this is by using the CSS property display: inline-block: http://jsfiddle.net/thirtydot/bmxSY/7/

.box {
    float: right;
}
.container-box {
    width: 250px;
    font-size: 1.6em;  
    margin: 15px 25px; 
    border-bottom: 1px solid #999;
    text-align: left;
    display: inline-block;
    vertical-align: bottom;
}​

Answer №2

It may seem impossible at first, but with a little trickery, we can make it happen.

.outer {
    position:relative;
    display:table;
    height: 300px;
    width: 300px;
    vertical-align: middle; 
    text-align: center;
    border: 2px solid #DDDDDD;
    background:green;
    float:left
}
.inner {
    width:100%;
    display:table-cell;
    vertical-align:bottom;
    position:relative;
}
p{background:yellow;border:2px solid #111}

Check out the demo:

Answer №3

To position the div at the bottom of the parent, you can use table-cell property.

Unfortunately, dispaly:table-cell does not support the margin option, so you will need to adjust it using borders.

CSS

.container{display:table-row; float:right}
.header-container
{
    width: 200px;
    font-size: 1.4em;  
    border-right:20px solid white;   border-left:20px solid white;
    border-top:10px solid white;   border-bottom:10px solid white;
    border-bottom: 1px solid #bbb;        
    display:table-cell; vertical-align:bottom
}

DEMO

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

How to customize the hover and active properties of a checked checkbox in Vue 3 using Tailwind CSS and PUG?

It seems that checkboxes have a level of sophistication that I never anticipated, or perhaps my brain just can't quite grasp the nuances of checkboxes. After spending a significant amount of time researching and experimenting with checkboxes in a Vue ...

What is the best way to refresh the slick jQuery plugin for sliders and carousels?

I am currently facing an issue with two buttons that have the same function. The purpose of these buttons is to retrieve data from an API, convert it to HTML, and then append it to a <div> using jQuery. Finally, the data is displayed using the slick ...

The CSS zigzag border functionality seems to be malfunctioning on Internet Explorer

On my clients website, I decided to use a zigzag css border instead of an image for speed purposes. I wanted to have different colors and variations, but I encountered a problem. While my version displayed correctly on Chrome and Firefox using Windows, it ...

Display an empty string when a value is NULL using jQuery's .append() function

To set an HTML value using the .append() function, I need to include AJAX data values. If the data set contains a null value, it will show as 'null' in the UI. I want to remove that 'null' and display it as blank. However, I can't ...

Tips for making a table have the same width as its child td elements and enabling the table to exceed the width of the viewport

I am facing a challenge with a table that has dynamically changing rows and columns. <table> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> <tr> <td> ...

How can I dynamically alter the width of a Bootstrap progress bar using the {{$percentage}} variable in a Laravel stylesheet?

I am currently working on a project where I aim to display the percentage of marks obtained using a progress bar. I have the percentage value and I am trying to pass this value in the style: "width:{{$percentage}}" so that the progress bar width changes a ...

Is there a way to align the mat card title and subtitle on a single line?

My code is utilizing Angular material and here is the HTML snippet: <mat-card> <mat-card-header *ngFor="let club of result[0]"> <mat-card-title>{{club.clubName}}</mat-card-title> <mat-card-subtitle>Clu ...

Prevent the Focus on Submit Button in CSS

Whenever a text field is focused in Opera, the submit button ends up with an unsightly black border. A screenshot clearly shows this issue. At the bottom of the image, you can see how the textarea is focused and the submit button looks unappealing. Is th ...

Is there a way to ensure that my Delete Entry Button is fully operational?

Excuse my lack of experience in coding. I've been struggling with getting my delete button to function properly on both my webpage and my MySQL database. Right now, when I click the delete button, it just redirects me to a URL ending in /delete withou ...

Could LXML potentially determine the value of a class in HTML?

For instance, consider the following scenario: <button class="oW_lN oF4XW sqdOP yWX7d _8A5w5 ">MyTextIsHere</button> The "MyTextIsHere" part of the code can contain only two specific values: "Yes" and "No". Is it feasible to determine wh ...

Display a hidden div only when a cookie is set during the initial visit

I'm currently facing an issue while trying to set multiple cookies based on the existence of a div using JavaScript. On the first visit, I want to display the div to the user if it exists, then set a cookie (named redCookie) that expires in 3 days. Up ...

Achieve text length that does not exceed the specified limit dynamically

Is it possible to determine the length of the visible portion of text that overflows (or calculate the size of the overflow for further processing) using CSS or JavaScript? If so, can this calculation be done dynamically (such as on window resize)? The g ...

Bootstrap 5's h-100 feature functions flawlessly in Chrome, however, it encounters issues when used with a group

Can you please refer to this question: Issue with Aspect Ratio of Images in Bootstrap 5 due to Padding After applying the h-100 solution, everything looks great on Chrome. Unfortunately, when I check it in Safari, the aspect ratio of the image gets distor ...

"Enhance Your Design: Creative CSS Animation Effects for Underlined

I've been experimenting with incorporating animation into material-UI, specifically making the underline move from left to right for a tab. Here's the code I've come up with: const useStyles = makeStyles({ link: { padding: "1rem&quo ...

Tips on looping through a universal array and retrieving user input

My current project involves creating a news site using the Guardian API. I want to implement a search feature that allows users to input keywords and retrieve the webTitle attribute for matching elements. While I could simply insert the user input directly ...

Interactivity Battle: Clickable Div, Button, or href?

I'm currently exploring the optimal methods for generating buttons using HTML and CSS. In the past, I used clickable divs, but it seems that may not have been the most effective approach. Should I consider using buttons or anchor tags instead? What ...

Ways to adjust the border color when error helper text is displayed on a TextField

I am currently working with React Material UI's TextField element. What I aim to achieve is when the submit button is pressed, the helpertext displayed should be "Please enter the password." It should look like this: https://i.sstatic.net/Nu0ua.png ...

What is the best way to focus on a specific section of a CSS class name?

Successfully Working Example: HTML: <div class="items"> <div class="item">item 1</div> <div class="prefix-item-suffix">item 2</div> <div class="item">item 3</div> < ...

Process of converting Ionic application for Android and iOS to APK format

I recently transformed my website into an ionic app, and I've noticed that the app size is almost 15MB. All my JS, HTML, and CSS files are currently stored in the www/app directory, with Bower components located in www/lib. To optimize the size of the ...

`Weaving mesh into place with three.js`

I'm struggling to grasp how to position my cubes on the canvas. I can't quite figure out how positioning actually works. I'm trying to find a way to determine if my mesh reaches the limits of the canvas. But what exactly is the unit of posit ...