Div showing on new line

HTML & CSS
1

I’m having trouble putting the text “right text” in the span on the same line as the h1 tag, it seems to create a new line for some reason unbeknown to me.

<div id=“titlehead” style=“width:500px;”>
<h1><span>H1 text</span></h1>
<span>right text</span>
</div>

The example is here, I tried with divs and containing divs but nothing seems to work. Maybe I should just use a table?! :eek:
http://tinyurl.com/3skbcpk

2

Headings are block elements by default and occupy the entire width of the parent, so subsequent elements will appear below.

You can set the h1 to display:inline;

This will nullify the top and bottom margins of the h1, but you can compensate by applying sufficient line-height to the h1 or padding on the parent div.

3

Thanks Victorinox it does the job in FF but in IE it seems to move the position of the div. http://tinyurl.com/3skbcpk I would like to use divs if possible not spans but using divs seems to create other issues

4

Thanks Victorinox it is on the same line now :slight_smile: It would be nice to change the spans to divs, I would just float them both left?: http://tinyurl.com/3skbcpk

5

You can solve this problem in many ways, as far as presentation goes. But I would start by questioning your mark up first.

  1. why is there a SPAN inside the H1, are you you need an extra hook? ( you definitely don’t need it if all you are trying to do is add that arrow image.)

  2. Is the “right text” PART of the heading… IF SO , then it should go INSIDE the H1 as well. IF NOT then you NEED to use a block level element ( DIV, P, etc…). Yes that will make go in a new line but we’ll deal with that in a min.

  3. Aside from the fact that inline style kinda defeats the purpose of CSS, you DON’T NEED "style=“width:100%;” on #titlehead at all; by default all block elements are width:100%.

  4. OK now getting onto how to put things on the same line ( delete all your INLINE CSS , as its actually wrong). Also am assuming the " right text" is not part of the headline ( see #2)

This should be your mark up:


<div id="titlehead">
      <h1>H1 text</h1>
      <div class="text">right text</div>
</div>

IF you want : “H1 text right text” to appear next to each other:

#titlehead .text , #titlehead h1 { display: inline; }

would work but I would go with:

#titlehead {overflow:hidden;}/*make sure you HAVE NOT given a height to #titlehead anywhere  or it will crop off  content*/
#titlehead  h1, #titlehead .text{ float:left}

IF you want your H1 to be on the left and the right text to b at the opposite end ( space in between)

#titlehead {overflow:hidden;}/*make sure you HAVE NOT given a height to #titlehead anywhere  or it will crop off  content*/
#titlehead  h1{ float:left}
#titlehead .text{ float:right}

Hope that helps.

6

Thanks Dresden

  1. why is there a SPAN inside the H1, are you you need an extra hook? ( you definitely don’t need it if all you are trying to do is add that arrow image.)
    TAKEN OUT
  2. Is the “right text” PART of the heading… IF SO , then it should go INSIDE the H1 as well. IF NOT then you NEED to use a block level element ( DIV, P, etc…). Yes that will make go in a new line but we’ll deal with that in a min.
    NOT
  3. Aside from the fact that inline style kinda defeats the purpose of CSS, you DON’T NEED "style=“width:100%;” on #titlehead at all; by default all block elements are width:100%.
    THANKS
  4. OK now getting onto how to put things on the same line ( delete all your INLINE CSS , as its actually wrong). Also am assuming the " right text" is not part of the headline ( see #2)

It is not part of the healdine. I used the last block of css code but it seems to be now showing on two lines.
http://tinyurl.com/3skbcpk

7

No they are both more or less level except that you have given the h1 a top margin of 12px so it is 12px further down the page

8

Cheers Paul I got rid of the margin and the lineheight I had on there and bingo thanks :slight_smile:

9

Always glad to help.
Note that different elements, such as Hxs, and Ps have their own default margins. Another good reason to reset all margins/padding to 0 at the start of your style sheet. :slight_smile: