Setting the height of a span element to 100% - html

Question

I'm currently building a theme / style for a piece of software.
Currently, the code looks like such:
http://jsfiddle.net/afseW/1/
The relevant code is:
body div[type*=privmsg] .sender {
font-weight: 700;
width:134px;
text-shadow: #fff 0px 1px;
background-color: #eee;
min-height:22px;
border-right: 1px solid #dcdcdc;
padding-right:5px;
text-align:right;
display:inline-block;
overflow: auto;
}
Note that in fiddle, for some reason, the text is collapsing onto the second line, whereas in the client, the image looks like this:
Granted, a span is not meant to be a block, hence I've given it the property of: display: inline-block;
But how do I get the height to inherit the parent p block?

Answer 1

I changed DOM structure. See the inline style. In the first div (.message) I prefer a better solution adding a .clearfix class, see this.
<div class="message" type="privmsg" style="overflow: auto;">
<div class="sender-cont" style="width: 30%; float: left;">
<span class="sender" ondblclick="Textual.nicknameDoubleClicked()" oncontextmenu="Textual.openStandardNicknameContextualMenu()" type="myself" nick="shamil" colornumber="20">+shamil</span>
</div>
<div style="width: 70%; float: left;">
Welcome to <span class="channel" ondblclick="Textual.channelNameDoubleClicked()" oncontextmenu="Textual.openChannelNameContextualMenu()">#textual-testing</span>! This channel is for the users of the Textual IRC Client to test scripts and do other activities in an unregulated environment. — <span class="inline_nickname" ondblclick="Textual.inlineNicknameDoubleClicked()" oncontextmenu="Textual.openInlineNicknameContextualMenu()" colornumber="3">milky</span>'s law states: "On IRC, after a user has executed a command that outputs interesting information to a channel (i.e. /sysinfo), then there will be at least two users that do the same."
</div>
</div>
Hope this helps!

Answer 2

Since the spans are a set width, probably the easiest thing to do here is just make the span have a absolute position.
body div[type*=privmsg] .sender,
body div[type*=action] .sender {
position: absolute;
top: 0;
bottom: 0;
left: 0;
...
}
Then add padding to the parent element:
body span.message {
position: relative;
padding-left: 140px;
...
}
http://jsfiddle.net/afseW/3/
PS: please provide a trimmed down version in jsfiddle next time, the html and css here is pretty epic.