Table size to content?

[nazer1290]

[IMG]http://puu.sh/ataAe/1095d4004a.jpg[/IMG]

I'm wondering how to get the Logged in box to size and expand to the left depending on how long the username is, and I can't seem to do it. Help would be appreciated - relevant code if it helps below.

<form method="post" action="./" id="form1" style="background-color:rgba(255, 0, 0, 0.5);">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="G48HAhikoT2TJ46t1YnTdnhtHrpJHlN1WjEE383twh3Bo1c675EASSSEbHTw6M7jmJ8lbFdAw0cnhn7I8hh8OEXiAj1h5zNLeCUGEcUZH8zgTMu85OR80U8odh2tFHPE5vqSjxsZ63dcP5tdUjoOQB2GesFF4Z/+TVG3ZRypVUIyhdXKEVWinm72msYNzuJkKAiWX3KV/MYoMhS+rrbwHHrQ7dHoC4c/ScY/QNVUKdQRGqwHrycDGTOGqwtQLREDWDTQlBf+UB2OAJ2y9UkVYRtJLGnuq22Gg6Jizg7fbMLF0+9AKRQtXMAzEugO+tcdUWP/dAm2yeWFgr2FL/sr+x4XXdBEppvK8Y1eaqBDozzwMpDOHCgdS1nnLVCBHDhL/7sC+80rJFFUrca5fukyKPZH1Wy3MMKgwvZOlAih8xQ6WI5cS+I6cH0KrQqe9/BisfO7PDqDhSoQWyvoJhOUKqwoVtpU/1tCKdrDKvmZvQU=">
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


        
        <div style="margin: 0 auto; background-color:rgba(255, 0, 0, 0.5); width: 920px;">

            
            <div id="Panel2" style="height:105px;width:920px;background-image:url(Images/Aperture-Gaming_01.png);">
	
                <table style="width: 100%; height: 100%;">
                    <tbody><tr>
                        <td class="auto-style5">
                            
                        </td>
                        <td class="auto-style6" style="width: auto; text-align: center; table-layout: auto; margin-right: 5px;">
                            
<link href="Content/Site.css" rel="stylesheet" type="text/css">
<style type="text/css">
    .auto-style1 {
        width: 833px;
    }
</style>
<div id="LoggedInBox1_Panel1" class="loginBoxPanel" style="height:88px;">
		
    <table style="width: auto; height: 100%; margin-left: 0px;">
        <tbody><tr>
            <td class="auto-style1">
                <table style="width: 100%; height: 100%">
                    <tbody><tr>
                        <td style="text-align: right">
                            <a id="LoggedInBox1_UsernameLink" class="staticLink" href="javascript:__doPostBack('ctl00$LoggedInBox1$UsernameLink','')" style="color:White;font-family:Verdana;font-weight:bold;">Nazer VII</a>
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="text-align: right">
                            <input type="submit" name="ctl00$LoggedInBox1$LogOutButton" value="Log Out" id="LoggedInBox1_LogOutButton" style="color:White;background-color:#666699;">
                        </td>
                    </tr>
                </tbody></table>
            </td>
            <td style="text-align: right">
                <img id="LoggedInBox1_AvatarImage" src="http://media.steampowered.com/steamcommunity/public/images/avatars/f3/f343343d2e6c11d6bfaf73937a4170ccbf60ecd8_medium.jpg" style="border-color:Black;border-width:2px;border-style:Solid;height:64px;width:64px;">
            </td>
        </tr>
    </tbody></table>

	</div>




                            
                        </td>
                    </tr>
                </tbody></table>
            
</div>
            </div>
            <div style="border-width: 1px; border-color: #000000; background-color: #FFFFFF; width: 920px; height: auto; border-bottom-style: solid;" id="LinesOut">
                <div id="Panel4" style="height:25px;">
	
                            
</div>
                    <div id="Panel3" style="width:100%;">
	
                    
    <table style="width: 100%; margin-top: 10px;">
        <tbody><tr>
            <td class="auto-style12">
                <img id="ContentPlaceHolder1_Image1" src="Images/robotstemppng.png" style="height:88px;width:88px;">
            </td>
            <td class="auto-style1">
                <span id="ContentPlaceHolder1_Label1" style="font-family:Verdana;font-weight:bold;text-align: left">Website Under Construction</span>
                <br>
                Website is unfinished and is being worked on! :)</td>
        </tr>
        <tr>
            <td class="auto-style12">
                <input type="image" name="ctl00$ContentPlaceHolder1$ImageButton1" id="ContentPlaceHolder1_ImageButton1" src="Images/icon2test.png" style="height:88px;width:88px;">
            </td>
            <td>
                <span id="ContentPlaceHolder1_Label2" style="font-family:Verdana;font-weight:bold;text-align: left">Direct All Enquiries Here</span>
                <br>
                Direct all enquiries to me at [e-mail]</td>
        </tr>
    </tbody></table>

                    
</div>
            </div>

    
<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="tIJBqs6J4BgIZBUpWqzGzl7EHR0BTtPhxgZ6OTu8bLt9Ds30XFqB81IEA0QssiFFnZYWkemdwkKhiQ3GpygxCrq7Z/XQTRuy3buAiqFFSjU1Sk71p4lBl5SARqE+sBwOn31g+R9LiZIcMXQ7ZzF6RnhDQpThiiSU0G97V6/WlbA=">
</div></form>

[Nexzer]

you shouldn't be using tables for something like that, take a look at this instead:
[url]http://jsfiddle.net/ACLP3/[/url]

[nazer1290]

Thanks, that seems to work and to be a much better way of doing it however, how would I get more text or elements to go under the username like so? (currently it does next to it)

[QUOTE] <div id="box">
<p id="username">Username hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </p>
<p id="username">Founding Member </p>
<img id="img" src="http://placehold.it/100x100"/>
</div>[/QUOTE]

[Nexzer]

[QUOTE=nazer1290;45514682]Thanks, that seems to work and to be a much better way of doing it however, how would I get more text or elements to go under the username like so? (currently it does next to it)[/QUOTE]
[url]http://jsfiddle.net/U56Bc/[/url]