3

Look I have this code:
CSS:

<style>
span#logo {
    height: 80px;
    width: 222px;
    background: url(img/logo.png);
    /* If I take out this it would give my span 0x0px size */
    float: left;
}
</style>

HTML:

<span id="logo"></span>

Why does it happens? Why do I need to have the float for it to have shape?

1
  • you don't have display: block; is part of it
    – Keith
    Oct 8, 2013 at 16:51

3 Answers 3

2

You don't need float, you need anything to make your span not inline. You could (and probably should) just change the display to either block or inline-block.

2
  • It would be inline-block, because with block it gives me a marginal error. Oct 8, 2013 at 16:55
  • 1
    @ZathrusWriter IE7 does support inline-block for spans. Oct 8, 2013 at 16:59
2

SPAN element itself is dimension-less. It is as big as whatever you put into it. To make it dimensions-aware, you need to change its display property to block or inline-block. Its default display is inline, which gives you the behavior you experience.

span#logo {
    height: 80px;
    width: 222px;
    background: url(img/logo.png);
    display: block;
    // or: display: inline-block; zoom: 1; *display: inline;
}
1

Floats are technically block-level elements, but they behave like inline elements in that they often don’t exist on a line of their own — the rest of your content will try to flow around a floated element.

For better understanding Read This

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.