2

Since I am having trouble with Firefox about positioning a block element by nature (header) to be inline by using display:run-in; i'm asking you for your help ! been searching for quite some time now and I cant find which CSS method could be used instead of just applying display:run-in; to the element, which is supported in all the major browsers. It is crucial that i position the element this way.

Anyone knows a method how to do this ?

Novica89
  • 212
  • 1
  • 5
  • 17

3 Answers3

2

If you'd like to display your element as a block element, but would position it inline, then

display: inline-block;

will do the trick for you.

Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
  • Not really... I DONT want to make the element a block, but an inline one, since I dont want it to be 100% of width like it's the deal with all the block elements, and using display:inline-block; will still make an element a block, but position it inline. I will still be 100% width – Novica89 Jan 08 '13 at 14:49
  • @Novica89: It won't be 100% wide if it doesn't require that much space... But you will be able to manipulate it as if it's a block element. But otherwise no. Width will be as much as it needs to be or as much as you set it to be. What difference would it make then compared to `block` anyway. Try it out. But if `inline` suits your needs then use that. – Robert Koritnik Jan 08 '13 at 15:04
1

The MDN still lists run-in as an experimental value, so we shouldn't be too surprised if it doesn't fully function in Firefox at this time.

As for options, there are at least two you could use: display: inline and display: inline-block.

Inline might suffice if you don't need the properties of a block element on your header. Inline-block keeps it as a block element, so you can still do nice things like give it width, height, margin and so on.

View them on JSFiddle.

jamesplease
  • 12,547
  • 6
  • 47
  • 73
0

Alright i found a solution ! :) Using display:inline; in a combination with float:left; will make a block element by nature use space only as much as he needs, not full 100% of its parent element.

There is just one problem with this tecnhique if you are using bigger font for lets say a heading and want to add a paragraph right after it (on the same line). If the headings font-size is a bit bigger, heading could take 2 or even more lines of space in height where paragraphs text should be,and you will have a small gap between header and another row of paragraph under it. The solution is to add display:block; and margin-top:Xpx; to the paragraph element to align it as needed.

Novica89
  • 212
  • 1
  • 5
  • 17