Problem with div alignment

I am not that good with html and css so i am using a template, but whatever i do know i try to use it.

Here is an image of the problem http://i53.tinypic.com/dmw6yt.jpg

As you can see the user test is actually on a new line. That is not how it's supposed to be. It is supposed to be on the same line as this text "Accounts stats for user X".

The html and css i use are

<div class="user">Account stats for user<div class="info">test</div></div>

div.user
{
    font-size: 13px;
    text-align: center;
}

div.info
{
    font-开发者_C百科size: 18px;
}

use inline element <span> instead of block element <div>

Inline elements are for elements like text that you want to display on the same line and then fall down below previous inline elements when there is not enough space left. Block elements are intended to be used for the structure of a site.

This is because a DIV automatically assigns a new line because it is a 'block-level' element. In a situation like this I'd swap out all of the <div> for <span> as these are an inline-element.

You could also use the CSS attribute display:inline on the <div> to override this behaviour.

You put the word "test" in new div. This means that this word will be on new row. Try using span with class or id instead of div. If you really want to use div for the word "test" you could assign float property or inline display

<div class="user">Account stats for user<span class="info">test</span></div>


.info
            {
            margin-left: 10px;
            font-size: 18px;
            }

If you automatically want it to be on the same line, i would suggest using <span> instead.

<span class="user">Account stats for user</span><span class="info">test</span>

And if you absolutely need to use divs then:

<div class="user">Account stats for user</div><div class="info">test</div>

With the CSS:

div.user
{
    font-size: 13px;
    text-align: center;
}

div.info
{
    font-size: 18px;
    float:left;
}

Either use a <span class="info"> instead of a <div>, or use these CSS:

div.info
{
    font-size: 18px;
    display: inline-block;
}

Normally you should prefer using a span, but there are several cases (e.g. if you want to specify a width for the element) that require a div. In your case as it stands, go with a span.

Try this:

div.user
{
font-size: 13px;
text-align: center;
display: inline;
}

div.info
{
font-size: 18px;
}

I think this will do the trick.

you could add 'display:inline;' to them and it should work.

Or you could float them both to the left, also would probably work. 'float:left;'

put this inside div.info

display: inline;

So your div.info class should look like this

div.info 
{     
font-size: 18px; 
display: inline;

}