title: How to right align a div containing a form in another div?
body: <p>This is my header.</p>
  
  <p><img src="https://i.stack.imgur.com/knFKR.jpg" alt="enter image description here"></p>
  
  <p>My goal is to move the logout button to the far right, without loosing the ability of clicking on them.</p>
  
  <p>Now, I have tried position relative and absolute and this moves the button to the right, but then the buttons are no longer clickable.</p>
  
  <ul>
  <li>adding the line position:relative; to #my-menus (makes the buttons unclickable)</li>
  </ul>
  
  <p>I also tried adding a spacer, or making my logout button bigger but that did not work. the width was stuck to 125px whatever I did. (Those don't seem like valid solutions though...)</p>
  
  <p>As is, the buttons are clickable.</p>
  
  <p>What am I doing wrong? I am more interested in the why this is happening then how to fix it, since I can live with the current outcome. Also, if I'm totally using the wrong approach with all the divs and what not, let me know. I wish to learn.</p>
  
  <p>Here are the html and css files:</p>
  
  <hr>
  
  <pre><code>&lt;body&gt;
      &lt;div id="header"&gt;
          &lt;div id="title"&gt;
              &lt;div&gt;
                  &lt;img src="styles\monkey-head-pic-hi.png" alt=""&gt;
                  RotoMonkey
              &lt;/div&gt;
              &lt;div id="userGreeting"&gt;
                  &lt;p&gt;Welcome &lt;%=session.getAttribute("name")%&gt;!&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="my-menus"&gt;
              &lt;div&gt;
                  &lt;form method="get" action="homePageForm.jsp"&gt; 
                      &lt;input class="menuItem" type="submit" value="Home"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;form method="get" action="loginForm.jsp"&gt; 
                      &lt;input class="menuItem" type="submit" value="Members"&gt; 
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;form method="get" action="loginForm.jsp"&gt;
                      &lt;input class="menuItem" type="submit" value="Player Stats"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;form method="get" action="loginForm.jsp"&gt;
                      &lt;input class="menuItem" type="submit" value="Create League"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;form method="get" action="loginForm.jsp"&gt;
                      &lt;input class="menuItem" type="submit" value="Join league"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div id="logout"&gt;       
                  &lt;form method="get" action="loginForm.jsp"&gt;
                      &lt;input class="menuItem" type="submit" value="Logout"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;          
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>#header
  {
      width:100%;
  }
  
  #header div
  {
      width:1000px;
  }
  
  #title
  { 
      background-color:white;
      height:75px;
      color:Green;
      font-size: 40px;
  }
  
  #title div
  { 
      float:left; 
      width:500px;
      height:75px;
  }
  
  img
  {
      max-width: 100%;
      max-height: 100%;
      margin:5px;
      vertical-align: middle;
  }
  
  #userGreeting
  {
      position:relative;
      font-size: medium;  
  }
  #userGreeting p
  {
      position:absolute;
      bottom:0;
      right:0;
      margin: 0;
      padding: 0;
      margin-right: 20px;
      margin-bottom:5px;
  }
  
  #my-menus
  {
      background-color:green;
      overflow:hidden;
      width:1000px;
      height:auto;
      z-index:-2;
  }
  
  #my-menus div
  {
      display:inline-block;
      height:auto;
      text-align:center;
      border-right:thin solid white;
      width:125px;
  }
  
  /* #logout */
  /* { */
  /*  position:absolute; */
  /*  right:0; */
  /* } */
  
  body {
      width: 1000px;
      margin: 50px auto;
      border-radius: 5px;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 
                  inset 0px 1px 0px 0px rgba(250, 250, 250, 0.5);
  }
  
  input[type=submit] {
      border: green;
      background: transparent; 
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 );
      color: #fff;
      padding: 5px 5px;
      text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
      z-index:-10;
  }
  </code></pre>