Q:

Unable to get div inside top bar on website design design

Hi Im making a theme for my website which has a user menu in the top right corner of the page. This is inside a purple bar which also holds the title of the page. I have managed to get the user menu on the right hand side but I'm unable to get it into the top bar, it just sits bellow the bar. To see exactly what I mean here's a link to my site http://cpanel.gaigo.org
I believe it has something to do with the header div spreading accross the whole page but im unable to get it to shrink down to only fill 250px.
The HTML code is bellow:
<div id="headerWrap" style="position:fixed;width:100%; height:59px;z-index:1;background-color:#494158;">
    <div id="header" style="width:250px;">
        <h1 style="margin-bottom:0; margin-left:20px; color:#fff;" id="Title">GaiGO CPanel</h1>
    </div>
    <div id="userMenuButton" style="float:right;margin-right:10px;width:auto;">
        <span style="color:#fff;">Hi, Riley Evans</span>
        <img src="user.png" height="30" width="30"/>
    </div>
</div>

Thanks for any responses in advance I'm sure they will help me figure this out.

A:

You just try this code inside your body tag.I maked some changes inside your inline css in header,userbutton div id's
<div id="container">
        <div id="headerWrap" style="position:fixed;width:100%; height:59px;z-index:1;background-color:#494158;">
            <div id="header" style="width:250px;float:left">
                <h1 style="margin-bottom:0; margin-left:20px; color:#fff;" id="Title">GaiGO CPanel</h1>
            </div>
            <div id="userMenuButton" style="float:right;margin-right:10px;width:auto;margin-top:25px;">
                <span style="color:#fff;">Hi, Riley Evans</span>
                <img src="user.png" height="30" width="30">
            </div>
        </div>
        <div id="menuWrap" style="position:fixed; height:100%; z-index:0;">
            <div id="menuHolder" style="background-color:#77bb66;height:inherit;width:50px;float:left;margin-top:21px;position:relative;">
                <table class="menu" style="margin:0 auto; margin-top:38px;">
                    <tbody>
                        <tr>
                            <td class="sideMenuOption" id="dashboardButton" onclick="menuSlider('dashboardSubMenu')">
                                <img src="/style/images/designer-icons/Home-48.png" width="40" height="40">
                            </td>
                        </tr>
                        <tr>
                            <td class="sideMenuOption" id="pagesButton" onclick="menuSlider('pagesSubMenu')">
                                <img src="/style/images/designer-icons/Multi-Page-48.png" width="40" height="40">
                            </td>
                        </tr>
                        <tr>
                            <td class="sideMenuOption" id="mediaButton" onclick="menuSlider('mediaSubMenu')">
                                <img src="/style/images/designer-icons/Picture-48.png" width="40" height="40">
                            </td>
                        </tr>
                        <tr>
                            <td class="sideMenuOption" id="stylesButton" onclick="menuSlider('stylesSubMenu')">
                                <img src="/style/images/designer-icons/Brush-01-48.png" width="40" height="40">
                            </td>
                        </tr>
                        <tr>
                            <td class="sideMenuOption" id="settingsButton" onclick="menuSlider('settingsSubMenu')">
                                <img src="/style/images/designer-icons/Settings-02-48.png" width="40" height="40">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="subMenuHolder" class="hide">
                <ul class="subMenu dashboardSubMenu" id="dashboardSubMenu">
                    <li>Home</li>
                    <li>My Site</li>
                    <li>Stats</li>
                </ul>
                <ul class="subMenu pagesSubMenu" id="pagesSubMenu">
                    <li>Pages</li>
                    <li>New page</li>
                </ul>
                <ul class="subMenu mediaSubMenu" id="mediaSubMenu">
                    <li>Library</li>
                    <li>Upload</li>
                </ul>
                <ul class="subMenu stylesSubMenu" id="stylesSubMenu">
                    <li>Themes</li>
                    <li>Customise</li>
                    <li>Menus</li>
                    <li>Mobile</li>
                </ul>
                <ul class="subMenu settingsSubMenu" id="settingsSubMenu">
                    <li>General</li>
                    <li>Site</li>
                    <li>Account</li>
                </ul>
                <div id="closeSubMenuButton" onclick="subMenuClose()">
                    <img src="/style/images/designer-icons/Arrowhead-Left-01-48.png" height="30" width="30">
                </div>
            </div>
        </div>
        <div id="contentWrap" style="width:100%;height:2000px;">
            <div id="content" style="background-color:#EEEEEE;float:left;width:100%;height:2000px;margin-top:59px;margin-left:0px;">
                <div id="contentHolder" style="margin-left:50px;">Content goes here</div>
            </div>
        </div>
    </div>

