Div shouldn't be wider than the included content

[octo]

Hi guys,

I'm building a website and on the header of the website I have a div which includes the name of the
logged-in user along with some links.
What I'm trying to do is working perfectly fine on Firefox3 but
I can't get it to work on IE7.
The "loginlogout" div shouldn't be wider than the included content.
At the moment this working perfectly fine on Firefox3 but on IE7
the div is resizing to 100%.
Any ideas what I have to do to make this work?
Thanks a lot and here is the code:

 .loginlogout{
background:transparent url(http://example.com/left_slider_user.gif) 
no-repeat scroll left top;
height:20px;
line-height: normal;
float:right;
border:1px solid #666666;
position:relative;
width:auto;
}
.username{
background-color:white;
border-bottom:1px solid #C9C3B4;
border-top:1px solid #C9C3B4;
display:block;
float:left;
height:15px;
margin-left:5px;
padding:1px 10px;
}
.login{
height:20px;
float:right;
color:#999999;
}
.logout{
background:transparent url(http://example.com/right_slider_user.gif) 
no-repeat scroll left top;
float:right;
height:20px;
padding-left:20px;
padding-top:2px;
color:#999999;
}
 <div class="loginlogout">
  <span class="username">My username</span>
  <span class="logout">
  <a href="#">My Account</a>
  ¦ <a href="#">Logout</a>
  ¦ <a href="#">Help</a> 
  </span>
  </div> 

[edited by: engine at 9:35 am (utc) on Aug. 11, 2008]
[edit reason] examplified [/edit]

[swa66]

A float collapses on its own.

Why did you set width to auto on .loginlogout ?

Just try to have only the background, the border and the float, rip out the rest. I guess the same goes for some of the rest of the markup.
Similarly setting a fixed pixel height will cause trouble when you run into a user that has set a minimum size for fonts to override your font choices.

[octo]

I found a solution that works for me.
Please note that the spacing/sizing needs work

.list{
border:1px solid black;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding-left:50%;}
.list li{
float:left;
}
.firstle{
background:transparent url(http://example.com/left_slider_user.gif) no-repeat scroll left top;
}
.username{
border-bottom:1px solid red;
border-top:1px solid red;
display:block;
}
li.afterusername{
background:transparent url(http://example.com/right_slider_user.gif) no-repeat scroll left top;}
<ul class="list">
<li class="firstle"><span class="username">My username</span></li>
<li class="afterusername"><a href="#">My Account</a></li>
<li>¦ <a href="#">Logout</a></li>
<li>¦ <a href="#">Help</a></li>
</ul> 

cheers!

[edited by: engine at 11:54 am (utc) on Aug. 11, 2008]
[edit reason] Please use example.com [/edit]