Why won't my elements display horizontally? - html

Question

I have two sections of my website that should be displaying in a similar manor. One displays correctly, while the other does not. The top one puts each element on its own line, while the bottom puts the above and the two images side by side how I want them.
My two questions are:
1: Why is the broken version broken?
2: What part of the working version is enabling it to display properly (or a better follow up question, what parts of the css are not aiding in it displaying properly and can be deleted?
Broken:
html:
<div id="maintitle">
<span id="chara1"><img src= "<?= $charused ?>" width="150" alt="char2"/></span>
<span id="maintitletext"><h1> Welcome to Born4battle's Wolfenstein 3D page</h1></span>
<span id="chara2"><img src= "<?= $charused ?>" width="150" alt="char2"/></span>
</div>
css:
#maintitle{
color: #ffff00;
text-align: center;
}
#maintitle ul{
margin:0;
padding: 0;
list-style-type: none;
}
#maintitle li{
display: inline;
}
#chara1, #chara2, #maintitletext{
margin-top: 0px;
margin-right: auto;
margin-left: auto;
display: inline;
padding: .5em;
width: 110px;
}
Working:
html:
<div id="share">
<p> Get the official shareware for Wolfenstein 3D and Spear of Destiny below </p>
<span id="getwolf"><img src="http://www.timsooley.com/wolfnow.gif" alt="getwolf"></span>
<span id="getspear"><img src="http://www.timsooley.com/getspear.gif" alt="getspear"></span>
</div>
css:
#share ul{
margin: 0;
padding: 0;
list-style-type: none;
}
#share li{
display:inline;
}
#getspear, #getwolf{
margin-top: 0px;
margin-right: auto;
margin-left: auto;
display: inline;
/*background: #bbbbbb;
border-top: solid 2px #333333;
border-left: solid 2px #333333;
border-right: solid 3px #999999;
border-bottom: solid 3px #999999;*/
padding: .5em;
width: 110px;
}

Answer 1

Please see the Fiddle .
After reading your question what i have understood is that you want your images should be side by side and text should be in middle. in you broken code.
please let me know if i am lagging some where. So i can make changes as per your needs.
see the css rules what i added:
#maintitle{ color: #ffff00; text-align: center; overflow:hidden; width:480px; border:1px solid red; }
#maintitle span { width:148px; display:block; font-size:12px; }
#chara1, #chara2, #maintitletext{ margin-top: 0px; margin-right: auto; margin-left: auto; display: inline; padding: .5em; width: 110px; float:left; // added to make all elements in horizontal manner }

Answer 2

To show the text and images in same line, make these changes in your code:
http://jsfiddle.net/S3CBj/2/
#maintitle{
color: #ffff00;
text-align: center;
}
#maintitle ul{
margin:0;
padding: 0;
}
#chara1, #chara2, #maintitletext{
margin-top: 0px;
margin-right: auto;
margin-left: auto;
display: inline;
float: left;
padding: .5em;
width: 150px;
}​