CSS Inline Display does not work - html

Question

I have HTML as shown in http://jsfiddle.net/Lijo/LLq3v/1/
I need to put the following two div contents in one line.
Tax Report 1
: Frequency - Weekly
Though I have put a inline display, it is coming in two lines. What is the missing point here?

Answer 1

Making the container div inline will not create the effect you want. That will cause the container itself to act as an inline element see http://www.tizag.com/cssT/inline.php.
The best way to create the effect you want would be to float the inner divs to the left. Provided that they are narrower than the container then they will sit next to each other.
Making divs inline is usually frowned upon in web development however as commented below there are exceptions. This is from a post on a similar topic
<!-- An inline div is a freak of the web & should be beaten until it becomes a span
(at least 9 times out of 10)... -->
<span>foo</span>
<span>bar</span>
<span>baz</span>
<!-- ...answers the original question... -->
found here. Spans exist for a reason.
To float the div's left modify your CSS to be:
.reportTitle
{
font:bold 10pt Arial;
float: left;
}
.reportFrequency
{
font:normal 10pt Arial;
float:left;
}
But I would recommend replacing the divs with spans.

Answer 2

Try this fiddle update
.reportTitle
{
font:bold 10pt Arial;
float:left;
}
.reportFrequency
{
font:normal 10pt Arial;
float:left;
}

Answer 3

You have made the container an inline element, but the inner elements are still block elements, so they are displayed one below the other. Make the inner elements inline instead.
Demo: http://jsfiddle.net/LLq3v/5/

Answer 4

You can also use display: inline-block if you need to preserve the ability to set width or height. Oh, and I got a nice underline.
http://jsfiddle.net/4yqJ8/
.reportTitle {
display:inline-block;
}
.reportFrequency {
display: inline-block;
}

Answer 5

Use spans instead of divs for .reportTitle and .reportFrequency . http://jsfiddle.net/LLq3v/7/
If you want something to behave like an in-line element then you shouldn't code it as a div, you should instead use an inline element. Inline Elements on MDN . It's true that you can use css to do all the work, but there are reasons not to go that way
You're making life unnecessarily difficult for yourself
You're making the html less semantic, ie: a complete pain to interpret on it's own.
Also, if you want to make sure they always stay on one line, even when the parent container is too narrow, you can give it the value, white-space: nowrap

Answer 6

You have to set display:inline to elements which you want to be displayed inline, not the container element.
In your case, that would be .reportTitle and .reportFrequency, but not .repeaterIdentifier, which is the container element.
.reportTitle
{
font:bold 10pt Arial;
display: inline; /* HERE */
}
.reportFrequency
{
font:normal 10pt Arial;
display: inline; /* HERE */
}
.repeaterIdentifier
{
border-bottom:1px solid #A7A7A6;
margin: 0 0 5px 0;
display: inline /* This can be removed */
}
Live demo: jsFiddle