Trying to get these list items to display inline

Question

I have several unordered lists that I want to display like this:

<ul>
<li><img></li> <li><p></li>  //inline
</ul> 

//linebreak 

<ul>
<li><img></li> <li><p></li> //inline
</ul> 

...etc

I'm not able to get the li items to be inline with eachother. They are stacking vertically. I have stripped away most styling but still can't figure out what I'm doing wrong:

html:

<ul class="instrument">

      <li class="imagebox"><img src="/images/matepe.jpg" width="247" height="228" alt="Matepe" /></li>
      <li class="textbox"><p>The matepe is a 24 key instrument that is played by the Kore-Kore people in North-Eastern Zimbabwe and Mozambique. It utilizes four fingers-each playing an individual melody. These melodies also interwieve to create resultant melodies that can be manipulated thru accenting different fingers. The matepe is used in Rattletree as the bridge from the physical world to the spirit world.  The matepe is used in the Kore-Kore culture to summon the Mhondoro spirits which are thought to be able to communicate directly with Mwari (God) without the need of an intermediary.</p></li>
 </ul> 
    <ul class="instrument">
     <li class="imagebox"><img src="/images/soprano_little.jpg"  border="0" width="247" height="170" alt="Soprano" /></li>
     <li class="textbox"><p>The highest voice of the Rattletree Marimba orchestra is the Soprano marimba.  The soprano is used to whip up the energy on the dancefloor and help people reach ecstatic state with it's high and clear singing voice.  The range of these sopranos goes much lower than 'typical' Zimbabwean style sopranos.  The sopranos play the range of the right hand of the matepe and go two notes higher and five notes lower.  Rattletree uses two sopranos.</p></li>
 </ul> 
<ul class="instrument">
         <li class="imagebox"><img src="/images/bari_little.jpg"  border="0" width="247" height="170" alt="Baritone" /></li>
     <li class="textbox"><p>The Baritone is the next lower voice in the orchestra.  The bari is where the funk is.  Generally bubbling over the Bass line, the baritone creates the syncopations and polyrhythms that messes with the 'minds' of the dancers and helps seperate the listener from the physical realm of thought.  The range of the baritone covers the full range of the left hand side of the matepe.</p></li>
 </ul>
    <ul class="instrument">
      <li class="imagebox"><img src="/images/darren_littlebass.jpg"  border="0" width="247" height="195" alt="Bass"/><strong>Bass Marimba</strong></li>
      <li class="textbox"><p>The towering Bass Marimba is the foundation of the Rattletree Marimba sound.  Putting out frequencies as low as 22hZ, the bass creates the drive that gets the dancefloor moving.  It is 5.5' tall, 9' long, and 4' deep.  It is played by standing on a platform and struck with mallets that have lacross-ball size heads (they are actually made with rubber dog balls).  The Bass marimba's range covers the lowest five notes of the matepe and goes another five notes lower.</p></li>
 </ul>
<ul class="instrument">
      <li class="imagebox"><img src="/images/wayne_little.jpg"  border="0" width="247" height="177" alt="Drums"/><strong>Drumset</strong></li>
      <li class="textbox"><p>All the intricate polyrhythms are held together tastefully with the drumset.  The drums provides the consistancy and grounding that the dancers need to keep going all night.  While the steady kick and high-hat provide that grounding function, the toms and snare and allowed to be another voice in the poylrhythmic texture-helping the dancers abandon the concept of a "one" within this cyclical music.</p></li>

</ul>

css:

ul.instrument {
   text-align:left; 
   display:inline;   
}

ul.instrument li {
   list-style-type: none;
}

li.imagebox {
}

li.textbox {
}

li.textbox p{
    width: 247px;
}

Answer 1

You need to put the display:inline on the <li> elements, not the <ul> elements.

Answer 2

ul.instrument li {
   float: left;
}

Answer 3

the p element is a block element, so wether or not it is in an inline element such as your li it will force its' box.

I think the effect you want is inline-block (on the li)

li.textbox {
    display: inline-block;
}

Answer 4

Floating is usually your best bet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
            ul {
                list-style: none;
            }
            li {
                float: left;
            }
            li.imagebox {
                width: 247px;
                margin-right: 10px;
            }
            li.textbox {
                width: 600px;
            }
            li.textbox p {
                display: inline;
            }
            .clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <ul class="instrument">
            <li class="imagebox">
                <img src="/images/matepe.jpg" width="247" height="228" alt="Matepe" />
            </li>
            <li class="textbox">
                <p>
                    The matepe is a 24 key instrument that is played by the Kore-Kore people in North-Eastern Zimbabwe and Mozambique. It utilizes four fingers-each playing an individual melody. These melodies also interwieve to create resultant melodies that can be manipulated thru accenting different fingers. The matepe is used in Rattletree as the bridge from the physical world to the spirit world.  The matepe is used in the Kore-Kore culture to summon the Mhondoro spirits which are thought to be able to communicate directly with Mwari (God) without the need of an intermediary.
                </p>
            </li>
        </ul>
        <div class="clear"></div>
        <ul class="instrument">
            <li class="imagebox">
                <img src="/images/soprano_little.jpg" border="0" width="247" height="170" alt="Soprano" />
            </li>
            <li class="textbox">
                <p>
                    The highest voice of the Rattletree Marimba orchestra is the Soprano marimba.  The soprano is used to whip up the energy on the dancefloor and help people reach ecstatic state with it's high and clear singing voice.  The range of these sopranos goes much lower than 'typical' Zimbabwean style sopranos.  The sopranos play the range of the right hand of the matepe and go two notes higher and five notes lower.  Rattletree uses two sopranos.
                </p>
            </li>
        </ul>
        <div class="clear"></div>
        <ul class="instrument">
            <li class="imagebox">
                <img src="/images/bari_little.jpg" border="0" width="247" height="170" alt="Baritone" />
            </li>
            <li class="textbox">
                <p>
                    The Baritone is the next lower voice in the orchestra.  The bari is where the funk is.  Generally bubbling over the Bass line, the baritone creates the syncopations and polyrhythms that messes with the 'minds' of the dancers and helps seperate the listener from the physical realm of thought.  The range of the baritone covers the full range of the left hand side of the matepe.
                </p>
            </li>
        </ul>
        <div class="clear"></div>
        <ul class="instrument">
            <li class="imagebox">
                <img src="/images/darren_littlebass.jpg" border="0" width="247" height="195" alt="Bass"/><strong>Bass Marimba</strong>
            </li>
            <li class="textbox">
                <p>
                    The towering Bass Marimba is the foundation of the Rattletree Marimba sound.  Putting out frequencies as low as 22hZ, the bass creates the drive that gets the dancefloor moving.  It is 5.5' tall, 9' long, and 4' deep.  It is played by standing on a platform and struck with mallets that have lacross-ball size heads (they are actually made with rubber dog balls).  The Bass marimba's range covers the lowest five notes of the matepe and goes another five notes lower.
                </p>
            </li>
        </ul>
        <div class="clear"></div>
        <ul class="instrument">
            <li class="imagebox">
                <img src="/images/wayne_little.jpg" border="0" width="247" height="177" alt="Drums"/><strong>Drumset</strong>
            </li>
            <li class="textbox">
                <p>
                    All the intricate polyrhythms are held together tastefully with the drumset.  The drums provides the consistancy and grounding that the dancers need to keep going all night.  While the steady kick and high-hat provide that grounding function, the toms and snare and allowed to be another voice in the poylrhythmic texture-helping the dancers abandon the concept of a "one" within this cyclical music.
                </p>
            </li>
        </ul>
        <div class="clear"></div>
    </body>
</html>