-1

For some reason my header buttons, which are just:

<a href="#" class="button">Home</a>
<a href="#" class="button">Sign In</a>
<a href="#" class="button">Join!</a>

I am wanting them to display inline with the h1 tag, although they aren't. The html/css is here: http://jsfiddle.net/XqsvP/

I'm not sure what css inline I need to be using or what.

tckmn
  • 57,719
  • 27
  • 114
  • 156
Harrison Howard
  • 173
  • 2
  • 5
  • 14

1 Answers1

1

<div> elements are "block"-level elements, by default. What this means is that they are always preceded by what can be thought of as a new line, as opposed to being "inline" with the current line.

On the jsFiddle you link to, try changing div.right to be display:inline; or display:inline-block; (line 25 of the CSS). This will cause the <div> to be displayed "inline" with the current line.

I have forked your fiddle to demonstrate the change I suggest: http://jsfiddle.net/CBEGS/1/

Note that the vertical margins might need some adjustment and the wrapping might still force the buttons to wrap onto the next line, but solving these seperate issues are the subject of a seperate question :)

To have div.right right-aligned and the h1.nobreak left-aligned, you might need to make the width of div.header_div set to 100% so that it is aligning to the right of the page as opposed to the right of a narrow div.

Also, these questions may be of relevance:

Align two inline-blocks left and right on same line

"text-align: justify;" inline-block elements properly?

Community
  • 1
  • 1
kwah
  • 1,149
  • 1
  • 13
  • 27
  • Thanks! But how would I make them go to the right? text-align: right; isnt working. :/ – Harrison Howard Mar 03 '13 at 00:34
  • That "feature" wasn't requested in the question ;) – kwah Mar 03 '13 at 00:44
  • Can you help me with it though/ – Harrison Howard Mar 03 '13 at 00:48
  • To be honest, for the left/right alignment the best I could suggest off the top of my head is to use `float:left` / `float:right`, but these are very messy "solutions". Fortunately for both of us, it is answered much better elsewhere on SO than I could hope to do so - I shall include a couple of links in a moment :) – kwah Mar 03 '13 at 00:53
  • I'm using this for the right(menu) div: div.right{ display:table-cell; float: right; vertical-align: middle; padding-right: 15px; } – Harrison Howard Mar 03 '13 at 00:57