You are here:
Web Design > CSS > Headings Side by Side.

Headings Side by Side

You can easily have HTML headings (or headers) like <h1>, <h2>, <h3>, etc. displayed altogether, in one line / sentence /paragraph in your web pages. You do this by using this one CSS property: display:inline

If you add the following HTML in a test web page and view it with a browser;

code:

<html>
<head>
<title>Guess what?</title>
</head>
<body>
<h1>This is Header 1.</h1>
<h2>And this is Header 2.</h2> 
<p>Guess what? This is a paragraph.</p>
</body>
</html>

this is what you will most likely see:

What if I want all my headings in one line, like in a sentence?

You mean like this?

First, we add the following CSS code to our sample HTML page above, anywhere between the <head> and </head> tags.

code:

<head>
<style type="text/css">
<!--
.side { vertical-align:absbottom; display:inline }
-->
</style>
</head>

I couldn't get the (correct) vertical-align value of text-bottom to work, so I used absbottom instead.

Adding the class to our headings

Next we add this .side CSS class anywhere we want 2 different headings to be displayed side by side or in one line.

code:

<body>
<h1 class="side">This is Header 1.</h1> 
<h2 class="side">And this is Header 2.</h2>

Our entire HTML code for this sample page may now look something like this:

code:

<html>
<head>
<title>Guess what?</title>

<style type="text/css">
<!--
.side { vertical-align:absbottom; display:inline }
-->
</style>

</head>
<body>
<h1 class="side">This is Header 1.</h1> 
<h2 class="side">And this is Header 2.</h2> 
<p class="side">Guess what? This is a paragraph.</p>
</body>
</html>

Try it, it's useful... trust me!

You are here:
Web Design > CSS > Headings Side by Side.