Is there a way to place text after <h1> in one line?

Question

I have the following code:

<h1><span>Test Heading</span></h1> 

and CSS:

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

Now it displays something like this:

 XXXXXXXXXXXXXXXX x Test Heading X XXXXXXXXXXXXXXXX ---------------------------------------------------------------------------------------- 

What I need to do is the text to the right of the title looks like this:

 XXXXXXXXXXXXXXXX Some text aaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb x Test Heading X more text aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa XXXXXXXXXXXXXXXX aaaaaaaaaaaaaaaaaaaaaaaaaaa ---------------------------------------------------------------------------------------- 

I think this is not so easy to do. Can anyone suggest how I can do this? I think I need some kind of external private DIV for my title, but when I tried, the text was always displayed below the title and not on the right.

Here is an example of what I have now

demo

Answer 1

Wrap everything in a <div> , move the pink background color and bottom border to <div> and put <h1> left.

For example:

 <div class="bb"> <h1><span>Test Heading</span></h1> 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. </div> 

CSS

 .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; } 

Fiddle: http://jsfiddle.net/ambiguous/FNLBD/

You probably want to stroke the fields and fields a bit though.

Answer 2

Place the text H1 and other text in separate DIVs. Then make them float next to each other using CSS

Answer 3

Float header.

Answer 4

to try

 display:inline; 

http://jsfiddle.net/gKqQc/

Answer 5

Add this to CSS H1:

 float: left; margin-right: 10px; 

This will put your heading to the left so that the text can wrap around it to the right. Check out this JS script , right margin add a 10px field to the right of the title for the presentation.

Answer 6

float -in < h1 to left is the best option in this case, and your markup can do a little tweaking to do it in the best way.

 <div class="box"> <h1>Test Heading</h1> <p>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> </div> 

Demo: jsfiddle.net/Marcel/ryGFq/10

You will see there the second option in the demo, also showing the best way to keep the content justified, however an absolute value is required for margin-left .

Answer 7

Try

 display: table-cell; 

Both for H1, and for the text. They will appear next to each other.