How to Align Two Headers Vertically Next to Each Other Using HTML and CSS

Looking for a solution for aligning the orange date:

Here is the current setup:

Check out the JsFiddle example: http://jsfiddle.net/N4gpA/

(Including code as jsfiddle-only is not permitted)

HTML: 

<div class="Box1"><a href="#">
                           <img src="http://imgur.com/CAcW4Yw.jpg">
                               <div class="txtBox1"><h2>2014 02 16</h2><h6>vilniaus KM laimėjo  prieš aisčius - <br> kristupas totoris pataikė tris tritaškius</h6></div></a> 
                     </div

CSS:

h6{
        display:inline-block;
        padding:0;
        margin:25px 0 10px 25px;
        font-size:24px;
        font-weight:400;

        text-transform:uppercase;
        color:rgb(230,230,230);

    }

    h2{
        display:inline;
        text-transform:uppercase;
        padding:0;
        margin:0px 0 10px 30px;
        font-size:13;
        font-weight:bold;
        color:#e6540c;
    }

.txtBox1{
        position: absolute;
        height: 140px;
        width: 100%;
        background:url(http://imgur.com/c9KcXjv.jpg);
        bottom: 0; 

    }


    .Box1{

        float:left;
        width: 703px;
        height: 589px;  
        overflow: hidden;
        position: relative;
        margin: 0px 0px 15px 0px;
        border-radius: 5px;

    }

Looking for an easier way to vertically align the date without dealing with boxes and absolute positions?

htmlcsstextalignment

Answer №1

Ensure your HTML is tidy by closing all tags properly.

<div class="Box1">
    <a href="#">
        <img src="http://imgur.com/CAcW4Yw.jpg" />
        <div class="txtBox1">
            <h2>2014 02 16</h2>
            <h6>
                Vilniaus KM emerged victorious against Aisčiai - <br />
                Kristupas Totoris scored three three-pointers
            </h6>
        </div>
    </a>
</div>

While I don't recommend it, if aligning to the top doesn't work, you can forcibly position elements.

NOTE: Borders have been added for visualization purposes to show the space occupied by your H2 and H6 elements.

h6 {
    display: inline-block;
    padding: 0px;
    margin: 25px 0px 10px;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    color: #E6E6E6;
    border: 1px solid #FFF;
    top: 0px;
    position: absolute;
    left: 120px;
}
h2 {
    display: inline-block;
    text-transform: uppercase;
    padding: 0px;
    margin: 0px 0px 10px;
    font-weight: bold;
    color: #E6540C;
    border: 1px solid #FFF;
    top: 25px;
    position: absolute;
}

It's preferable to segment your positioning elements as divs and reserve H1 - H6 tags solely for text formatting. This way, you can avoid conflicts between default formatting and your custom design.

Answer №3

Set the vertical alignment to top for h2, and fine-tune the position with <code>margin-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

Animating with Jquery swipe motion

I am looking to make my brand image appear animated when the site is opened. I want it to swipe or move linearly from left to right and then return to its original position. I tried searching on Google for a solution but couldn't figure out how to mak ...

jquerycss

issues encountered when trying to integrate bootstrap.js in Django framework

My website is built using the Django templating engine with Bootstrap for design and basic JavaScript. While the CSS components from Bootstrap are working fine, I'm having trouble getting the JavaScript to work: {% load staticfiles %} <!d ...

javascripthtmldjangotwitter-bootstrapbootstrap-4

What are some solutions for repairing unresponsive buttons on a webpage?

My task is to troubleshoot this webpage as the buttons are not functioning correctly. Here’s a snippet of the source code: <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <div id="container" ...

javascripthtmlcssbarcode

position blocks next to each other within a container

Thank you for all the hard work! I've been struggling to figure out how to align blocks next to each other within a div. It may not be that difficult, but I just can't seem to find an elegant solution... Here is the HTML code snippet: <div ...

javascripthtmlcss

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Utilizing a custom bootstrap css styles in my react app, I am seeking to enhance the default material ui components with the bootstrap styles. import React, {useState} from 'react'; import 'cg-bootstrap/core/build/cg-bootstrap-standard.css&a ...

javascriptcssreactjsbootstrap-4material-ui

using JavaScript to send numerous text box values to various views

I have a dilemma with passing values between two views. In View1, there are text boxes for entering basic information. After the customer enters this data and clicks on 'add more details', I want to transfer these details to the text boxes in Vie ...

javascripthtmlrazor

Can a different div or HTML element be used in place of the text "Hello World"?

<body onload="myfunction('target')"><div id="target"> "Hey there!" </div></body> Can we replace the text "Hey there!" with another HTML element or div? This is currently a left-to-right marquee text. <script language= ...

javascriptjqueryhtmlcss

Material UI AppBar fixed position that is not part of a grid container

Hey everyone, I'm really struggling with this issue. I recently set my AppBar to have a position of "fixed". However, now the appbar is no longer contained within its container and instead spans the entire screen. I've been trying to figure it ou ...

cssreactjsmaterial-ui

Create an animated circle in canvas that smoothly descends over a set duration

I am looking to animate a circle using the ctx.arc(10, 10, 15, 0, Math.PI*2, true); method and have it flow downwards without losing its trail. The image below illustrates this clearly: As shown in the image, the circle is continuously moving downwards o ...

javascripthtmlanimationcanvashtml5-canvas

Notifications for AngularJS tabs

I need help finding a method to incorporate "tab notification" using AngularJS, in order to show that there are important alerts that require attention. For example: (1) (3) TAB_ONE TAB_TWO TAB_THREE Could you provide any recom ...

javascripthtmlcssangularjs

How to target CSS when a DIV does not have a particular sibling

I am currently dealing with HTML markup that is being generated by a third-party application. I am in the process of styling it to fit my branding, but I have encountered a challenge that I cannot figure out. Most of the time, the HTML structure consists o ...

htmlcss

In JavaScript, what is the best way to target the initial option element in HTML?

As a newcomer to javascript, I'm wondering how to target the first option in the HTML <option value="">Choose an image...</option> without altering the HTML itself? My thought is: memeForm.getElementById('meme-image').getElement ...

javascripthtml

Setting the height of children within an absolutely-positioned parent element

I am facing an issue with adjusting the size of children elements based on their parent. The scenario is as follows: HTML <div class="video"> <div class="spot"> <img src="..." alt=""> <button>x</button> </div ...

htmlcsscss-position

What is the method, by using JavaScript or CSS, to include extra space at the end of text block without starting a new line?

Imagine having some text, and at the conclusion of each paragraph there is a (more)... link. The layout ends up looking like this: This is just an example paragraph. Click on the more link for additional information. (more...) Now comes the desire to i ...

javascripthtmlcsslayout

Animate the transition effect as soon as the block is displayed

Looking to create a smooth page transition using CSS changes with the help of Javascript (jQuery). Initially, one of the pages is set to display none. page1 = $('.page1'); page2 = $('.page2'); page1.removeClass('animate').cs ...

javascriptjquerycssanimation

Calculation Error in JavaScript/JQuery

I've been working on a JavaScript function to calculate the sum of values entered into textboxes, but it seems to be giving me inaccurate results in certain cases. Check out the FIDDLE here Enter values : 234.32 and 32.34 Result: 266.6599999999999 ...

javascriptjqueryhtmlasp.net

Sliding out the existing content and smoothly sliding in a fresh one upon clicking

Thank you for taking the time to read this. I've created a navigation bar and a few DIVs. What I want to achieve is when a button is clicked, the current DIV slides to the left and out of the page, while a new DIV slides in from the right. [http://w ...

jqueryhtml

Utilizing jQuery's Chained Selectors: Implementing Selectors on Previously Filtered Elements

DO NOT MISS: http://jsfiddle.net/gulcoza/9cVFT/1/ LATEST FIDDLE: http://jsfiddle.net/gulcoza/9cVFT/4/ All the code can be found in the above fiddle, but I will also explain it here: HTML <ul> <li id="e1">1</li> <li id="e2" ...

javascriptjqueryhtmljquery-selectors

Angular is unable to fetch the chosen option from a dropdown selection

Recently, I encountered an issue with a module form that appears as a pop-up. Within this form, users can input data required to create a new object of a specific class. One field allows users to select a ventilation zone for the new room object being crea ...

htmlangulartypescriptforms

Styles applied in the child component will have a cascading effect on the entire webpage

My webpage is divided into two parts: child1 and child2. Page Hierarchy: Parent Child1 Child2 Here are the CSS styles included in the page: Child1 -> z-index: 1 Child2 -> z-index: 2 What I want to achieve is to add a backdrop to the entire ...

cssangularangular7