Div will not display inline - html

Question

I have a container with two basic elements. A header and the body. In the header div I want a 50px by 50px image and a user name next to it, but I can't seem to get the username to display inline. What am I doing wrong? http://jsfiddle.net/FqW9d/14/

Answer 1

Add a float: left to both elements. Like:
#story-teller-head-contain img{
float: left;
/* your other styling */
}
#story-teller-head-contain h1 {
float: left;
/* your other styling */
}

Answer 2

Add a float left to the image and the div containing the name, I have updated your jsFiddle here http://jsfiddle.net/FqW9d/15/

Answer 3

can you use inline-block instead inline for the div with username or float bot img and `div.
Demo with inline-block: http://jsfiddle.net/FqW9d/16/
Demo with float: http://jsfiddle.net/FqW9d/17/

Answer 4

Inline display can be a bit of a pain. The cross browser way to do it is like this..
/* Older version of FF */
display: -moz-inline-stack;
/* newer versions of FF and Webkit */
display: inline-block;
/* trigger the correct behaviour in IE */
zoom:1;
/* IE */
*display: inline;
You need to declare the style sin that order.

Answer 5

As everyone else is saying make the image and persons name float: left;
http://jsfiddle.net/FqW9d/20/
By the way, i really like the set up you did here. So i messed with your source some:
http://jsfiddle.net/FqW9d/22/

Answer 6

You've got the following structure (I've added an image url so we can see that element):
<div id="story-teller-head-contain">
<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
<div id="client-name">
<h1> Matt Morris </h1>
</div>
</div>
The div elements and h1 are all block-level elements by default. However, all you need to do is float: left the img and #client-name elements, and they will flow left to their width (which you declare), without forcing the next element to flow beneath.
#story-teller-head-contain img {
float: left;
height: 50px;
width: 50px;
}
#client-name {
float: left;
height: 50px;
width: 200px;
}
#story-teller-head-contain h1 {
margin: 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'helvetica neue', arial, sans-serif;
font-size: 12px;
color: #3B5998;
}
http://jsfiddle.net/FqW9d/21/
So you're not really looking for display: inline, which will attempt to display the element's as "inline text" is displayed (such as this paragraph text); what you want is for the img and #client-name elements to not "force clear after". Your display: inline is what is allowing the h1, which is a block-level element, to disrupt your display, since it is overriding the display: inline of the parent element.
In fact, if you inspect with Firebug or Chrome Console, you'll see the above computes as float: left and display: block, even though display: block has not been explicitly declared.
See:
http://www.w3.org/TR/CSS2/visuren.html#floats
http://www.alistapart.com/articles/css-floats-101/
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/

Answer 7

I feel its better to use -
img{
float:left;
}
#client-name{
display: table-cell;
zoom:1;/*For IE only*/
}
You don't have to specify widths like in float method. It will automatically accommodate text with varying length.
I have updated your code - http://jsfiddle.net/FqW9d/27/
But I think your structure & css could be much more simpler. Since I don't know about the purpose, left it untouched.