CODEWITHSUNDEEP
htmlcss
Matthew Joseph Morris
Matthew Joseph Morris

Reputation: 149

Div will not display inline

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/

Upvotes: 0

Views: 1737

Answers (7)

Praveen Vijayan
Praveen Vijayan

Reputation: 6761

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.

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49188

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:

Upvotes: 0

John Riselvato
John Riselvato

Reputation: 12904

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/

Upvotes: 0

gargantuan
gargantuan

Reputation: 8944

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.

Upvotes: 0

Sotiris
Sotiris

Reputation: 40046

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/

Upvotes: 0

Kurt Logan
Kurt Logan

Reputation: 166

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

Upvotes: 0

Bas Slagter
Bas Slagter

Reputation: 9929

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 */
}

Upvotes: 1

Related Questions