why is span element not working with this piece of code

Question

I have a navigation menu which looks like this:

I have to split it into three parts (left, center, right).

I have written the html and css code like this:

<span id="nav-left-img"></span>
    <ul id="navigation">
        <li>Home</li>
        <li>About Us</li>
        <li>Products</li>
        <li>Contact Us</li>
    </ul>
<span id="nav-right-img"></span>

and here is the css:

ul#navigation
{
    background: url('../img/menu-c.png') repeat-x;
    height: 45px;
    clear: both;
    width: 420px;
}
ul#navigation li
{
    float: left;
    text-align: center;
    width: 100px;
    padding-top: 10px;
}
#nav-left-img
{
    background: url('../img/menu-l.png') no-repeat;
    height: 45px;
    width: 10px;
}

The span does not seems to do the trick; if I use a div it works. What is possibly wrong with the code? Is it ok if I use div instead of span or should I stick with div for joining that left and right image? How do I do it with span?

Answer 1

Maybe try setting the span to display block?

Answer 2

A div is display:block by default, a span is display:inline by default. Width and height cannot be set for display:inline elements.

I would recommend to use a div.