Is it possible to align a div on the same line with an h1 header that spans multiple lines using CSS?

I am currently working on the following code:

<h1><span>Test Heading This is the text that I want to display on the right side. This is the text that I want to display on the right side. This is the text that I want</span></h1>
<div>This is the text that I want to appear on the right side of the heading and above the blue base line. This is the text that I want to appear on the right side of the heading and above the blue base line.</div>

Below is the corresponding CSS style:

.bb {
    border-bottom: 1px solid #999;
    padding-bottom: 10px;
    background-color: pink;
    overflow: hidden;
}
h1 {
    font-size: 1.3em;
    font-family: calibri, arial;
    margin-bottom: 5px;
    float: left;
}
h1 span {
    color: #fff;
    background-color: #446688;
    padding: 1px 5px 3px 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

My question is whether there is a way to have the div on the same line as the h1 (spanning multiple lines).

For reference, here is the link to the code on JSFiddle: https://jsfiddle.net/tarjoadi/w5q6qqLv/

This is the desired outcome I am aiming for: screenshot

Your assistance in this matter would be greatly appreciated.

Thank you

javascriptjqueryhtmlcss

Answer №1

To have both chunks of text aligned on the same line, simply set them both to 'inline'. Apply the css style display: inline; to achieve this.

Make sure to also eliminate float: left; or else you may not achieve the desired outcome.

h1 {
    font-size: 1.3em;
    color: #fff;
    background-color: #446688;
    /* float: left; */
}

/* New styles */
h1, div.inline {
    display: inline !important;
}
<h1><span>Test Heading This is text</span></h1> 
<div class="inline">This is text that I want to make appear to the right of the heading</div>

Answer №2

It is possible to achieve the same result without utilizing the h1 tag.

.bb {
  border-bottom: 1px solid #999;
  padding-bottom: 10px;
  background-color: pink;
  overflow: hidden;
}
p {
  margin-bottom: 5px;
  float: left;
}
p span {
  font-family: calibri, arial;
  font-size: 1.3em;
  color: #fff;
  background-color: #446688;
  padding: 1px 5px 3px 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
<p>
  <span>Test Heading This is text that I want to make appear to the right This is text that I want to make appear to the right This is text that I want</span>
  This is text that I want to make appear to the right of the heading and above the blue base line. This is text that I want to make appear to the right of the heading and above the blue base line.
</p>

Related query: <h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)

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

Using Angular's $q service in the run block

I have a scenario where I need to load data from local files using the global loadJSON function (though it's not mandatory, it's recommended). Once the data is loaded from all the documents, I want to print the string 'i ve loaded'. T ...

javascriptangularjs

Establishing a Next.js API endpoint at the root level

I have a webpage located at URL root, which has been developed using React. Now, I am looking to create an API endpoint on the root as well. `http://localhost:3000/` > directs to the React page `http://localhost:3000/foo` > leads to the Next API end ...

javascriptreactjstypescriptnext.js

When configuring Webpack with a rule array, JSX is not properly recognized by the tool

Here is the configuration for my webpack setup: const path = require('path'); module.exports = { entry: './src/entry.jsx', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist&ap ...

javascriptnode.jsreactjswebpackbabeljs

Challenges with registering on Ajax platform

I'm currently facing an issue with my login/sign up process and I can't seem to figure it out. I have shared a jsfiddle link with the code, but I am struggling to identify the problem. https://jsfiddle.net/Zemanor/fuzrkw16/1/ Whenever I submit ...

javascriptphpjqueryajax

Discovering the specific style within an inspect-element and transferring it to a JavaScript file

As a novice in the realm of react/javascript, I encountered a situation where I successfully edited a specific style using the inspect element tool. However, despite my efforts, I struggled to locate the corresponding style within the Javascript file. Ha ...

javascriptreactjs

Issue with Input[type="search"] functioning properly on Internet Explorer versions 9 and earlier

input[type="search"] doesn't seem to be functioning properly on IE9 and below. Any ideas on how to fix it would be greatly appreciated. Here is a screenshot for reference: .search-form .row input[type="search"] { color:#9fa0a0; font-size:20 ...

htmlcss

Position an image on the top left corner of a div's border

I have a situation where I'm trying to overlay a small square transparent image on the top left border of a div that has a 1px border. The image is 48px by 48px in size and I want it to give the illusion that it's going underneath the top and lef ...

htmlcss

Issue with AngularJS: Unable to add a new property to an object

Here is the Javascript code I am working with in an AngularJS controller: $scope.schedule = {} $scope.selectEquipment = function(equip) { //alert(equip); $scope.schedule.equipment = equip; } I am successfully receiving the equip variable, but fo ...

javascriptangularjs

Iterate through each row in a table to locate a particular control by its ID and retrieve its

Is there a way to write a jQuery function that can loop through table rows and find hidden field values based on a specific hidden control ID ("hdnIsEmpty") without affecting other hidden controls? I'm facing this challenge and need help with finding ...

javascriptphpjqueryasp.net

Instant webpage updates upon editing CSS/HTML live

I recently watched a tutorial where a designer was updating CSS with live browser refreshes. What stood out to me was that the browser instantly showed any changes made to the CSS or HTML without needing to manually refresh the page. I am using a Mac with ...

htmlcssmacossafari

Exploring FileReader and DOMParser for AngularJS applications

I have a user uploaded file using AngularJS and would like to manipulate the file contents using XML. Unfortunately, I am facing an issue with the DOMParser recognizing the text file. index.html <div ng-controller = "myCtrl"> <input type ...

javascriptangularjsfilereaderdomparser

Exploring High-Density Mobile Devices with Bootstrap 3 Landscape Mode

After completing my first Bootstrap site using version 3, I noticed a display issue when viewing it on an iPhone 5 or LG G2 in landscape mode due to the pixel density. This was not a problem with the Responsive Grid system I previously used. Although I sp ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

Ways to verify the existence of a particular word within a nested array of objects

I have implemented a text input field and a send button for submitting the entered text. Utilizing the react-mention library, I am able to handle hashtags in the text. As the user types, if they include "#" it displays available hashtags from the data set. ...

javascriptreactjs

What steps can I take to avoid horizontal scrolling on mobile due to a table overflowing?

My website displays a table within a bootstrap container, row, and column. While everything looks good on larger screens, the content within the table is causing a horizontal scroll on smaller screens, making the footer look distorted. This results in a me ...

javascripthtmlcss

Utilizing jQuery to accentuate a specific div element when it is positioned directly in the center of the browser window

I have multiple divs with id="scroll_1", "scroll_2", "scroll_3", and so on. I am trying to implement a feature where when any of these divs is in the center of the window, I want to change the background color using jQuery highlight. Currently, I am able t ...

jqueryhtmlcss

What could be the reason behind the index not getting properly set for the array that was cloned afterward?

I need assistance with a code snippet that clones an array, resets the index (0, 1, 2 ...), and stores it in a variable named buildingsPayload: console.log('1:', this.buildings) const buildingsPayload = this.buildings.map((building, index) => ...

javascript

Troubleshooting: Issue with append function not functioning properly after click event in Angular

I am struggling to implement a basic tooltip in AngularJS. Below is the HTML I have: <span class="afterme" ng-mouseover="showToolTip('this is something', $event)" ng-mouseleave="hideToolTip();"> <i class="glyphicon glyphicon-exclama ...

javascriptjqueryangularjs

Enhancing Application Views in ExtJS Classic 7.3.0 using .scss Style Sheets

Referencing the guidelines provided in this resource for theming: In order to create CSS rules specific to an application view, you need to generate an .scss file within the same directory and with a matching base name as the view. For instance, if you w ...

cssextjssasssencha-architect

Using the jQuery month picker and trying to establish an initial min/max range may cause conflicts with the "from" and "to" functions

Currently, I am using a jQuery month picker (without date) with a format like: 201110. My goal is to set a min date by defining it in the Django forms.py as date-min and then parsing this date to HTML. I am also trying to establish a min/max range, which ...

jquerypythondjango

The grid feature in the Bones theme is malfunctioning and causing issues

I am currently using the Bones theme from Themble, which has a grid system in its design. I attempted to apply this grid system to the header of my website in order to transform menu items into icons on mobile devices and display the full menu on desktop s ...

htmlcssgridmenuitem