CODEWITHSUNDEEP
htmlcss
LCJ
LCJ

Reputation: 22652

CSS Inline Display does not work

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?

Upvotes: 0

Views: 699

Answers (6)

Jacob Tomlinson
Jacob Tomlinson

Reputation: 3773

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.

Upvotes: 3

user602271
user602271

Reputation:

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

Upvotes: 2

Nikola K.
Nikola K.

Reputation: 7155

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

Upvotes: 1

daveyfaherty
daveyfaherty

Reputation: 4613

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

  1. You're making life unnecessarily difficult for yourself
  2. 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

Upvotes: 1

yogi
yogi

Reputation: 19591

Try this fiddle update

.reportTitle
{
    font:bold 10pt Arial;
    float:left;
}

.reportFrequency
{
    font:normal 10pt Arial;
    float:left;
}

Upvotes: 3

Guffa
Guffa

Reputation: 700222

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/

Upvotes: 2

Related Questions