How to make my username div expand its width depending on the length of the username?

Question

Currently, I have 3 divs inside the parent div. 1 of these divs contains the username, which should expand its width depending on the length of the name. Right now, my divs just seem to fall apart when I edit my parent wrap div. Does anyone know how I can fix this?

this is what i am trying to explain

My html

<div id="user_wrap"> <div id="user_welcome"> Welcome <b>Christopher</b> </div> <div id="user_logout"> Logout? </div> <div id="user_pic"> <img src="images/user_pic.png" width="38" height="37" /> </div> </div> 

My css

 #user_wrap{ float: right; height: 40px; margin-right: 10px; margin-top: 5px; position: relative; width: 190px; } #user_welcome{ float: left; position: relative; text-align: right; width: 130px; font-size: 11.8px; font-family: "Helvetica Neue", Helvetica, Arial; color: #e3e3e3; margin-bottom: 3px; padding-top: 3px; } #user_logout{ float: left; position: relative; text-align: right; width: 130px; font-size: 11.8px; font-weight: 200; font-family: "Helvetica Neue", Helvetica, Arial; color: #939393; } #user_pic{ border-radius: 5px; float: left; height: 37px; margin-top: -18px; margin-left: 10px; width: 38px; -moz-box-shadow: 0 1px 4px #000000; -webkit-box-shadow: 0 1px 4px #000000; box-shadow: 0 1px 4px #000000; } 

Answer 1

If you don't declare the width of the floating element, it automatically scales its width to fit the content, so the first thing to do is remove the width declarations from CSS.

Now the problem is that since the username element and the exit element are floating, they are placed next to each other if the width of the parent element is not limited. The solution is to remove the float declaration from them and put them in a new floating parent div:

 <div id="user_info"> <div id="user_welcome"> Welcome <b>Christopher</b> </div> <div id="user_logout"> Logout? </div> </div> #user_info { float:left; } 

Demo: http://jsfiddle.net/bpeZp/