Align headings h2 and h4 on the left and right sides of the same line, ensuring they are at an

Question

Align headings h2 and h4 on the left and right sides of the same line, ensuring they are at an

I am attempting to create a header with h2 text on the left and h4 on the right, positioned on the same line with equal height and some padding. Here is the code snippet I have written:

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.nav {
  clear: both;
}

.nav {
  background-color: grey;
}

<div class="nav">
  <h2 class="alignleft">Left side</h2>
  <h4 class="alignright">RIGHT SIDE</h4>
</div>

If you'd like to see the code in action, check out this fiddle. Any assistance would be greatly appreciated.

html css

Answer 1

Answer №1

When specifying a class name in the HTML class attribute, do not include the dot before the class name. Your code should look like this:

<div class="nav">
    <h2 class="alignleft">Left side</h2>
    <h4 class="alignright">RIGHT SIDE</h4>
</div>

Also, remember to add a line-height property in your CSS rules:

.alignleft {
    float: left;
    line-height: 25px;
}

.alignright {
    float: right;
    line-height: 25px; /*or any other desired pixel value*/
}

.nav {
    clear: both;
    background-color: grey;
}

Answer 2

When specifying a class name in the HTML class attribute, do not include the dot before the class name. Your code should look like this:

<div class="nav">
    <h2 class="alignleft">Left side</h2>
    <h4 class="alignright">RIGHT SIDE</h4>
</div>

Also, remember to add a line-height property in your CSS rules:

.alignleft {
    float: left;
    line-height: 25px;
}

.alignright {
    float: right;
    line-height: 25px; /*or any other desired pixel value*/
}

.nav {
    clear: both;
    background-color: grey;
}

Answer 3

Answer №2

After advice from @MrGeek, it is recommended to eliminate the prefix . from the class name. Ensure that both the h2 and h4 elements have the same line height.

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.nav {
  clear: both;
}

.nav {
  background-color: grey;
}

h2, h4 {
  line-height: 24px;
}

<div class="nav">
  <h2 class="alignleft">Left side</h2>
  <h4 class="alignright">RIGHT SIDE</h4>
</div>

Answer 4

After advice from @MrGeek, it is recommended to eliminate the prefix . from the class name. Ensure that both the h2 and h4 elements have the same line height.

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.nav {
  clear: both;
}

.nav {
  background-color: grey;
}

h2, h4 {
  line-height: 24px;
}

<div class="nav">
  <h2 class="alignleft">Left side</h2>
  <h4 class="alignright">RIGHT SIDE</h4>
</div>

Align headings h2 and h4 on the left and right sides of the same line, ensuring they are at an

Answer №1

Answer №2

Similar questions

Creating a PDF document using html2pdf: A step-by-step guide

Algorithm for detecting collisions in Javascript

How can I keep a button element in place when resizing the window using CSS?

Switch the ng-bind-html option

Resizing the background while scrolling on a mobile web browser

Obtaining rotate3d values using JavaScript / jQuery

Discrepancy in CSS rendering in Chrome and Firefox

What's the connection between CSS and frameset?

Latest FF 35 showing alert for blank field in HTML5 email input box

Update the content of a div using jQuery and AJAX by targeting a specific button ID

When trying to open an HTML table that was exported to .xls file using FireFox for downloading, it fails

Each Browser Approaches Simple Search Fields in its Own Unique Way

Transferring JSON data from Django for visualization on a D3 graph

Once you utilize the register function with react-hook-form, the input text becomes uneditable

Methods to prevent images from spilling over into divs?

What steps should I take to ensure that clicking this button triggers the API request and returns the data in JSON format?

Saving user input from a PHP form into a text file

The issue lies in the alignment of the navbar at the top

Align the text vertically in your HTML email

Hover over the text to reveal its content