This is my header.
My goal is to move the logout button to the far right, without loosing the ability of clicking on them.Now, I have tried position relative and absolute and this moves the button to the right, but then the buttons are no longer clickable.
- adding the line position:relative; to #my-menus (makes the buttons unclickable)
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...)As is, the buttons are clickable.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.Here are the html and css files:\[code\]<body> <div id="header"> <div id="title"> <div> <img src="http://stackoverflow.com/questions/15602584/styles/monkey-head-pic-hi.png" alt=""> RotoMonkey </div> <div id="userGreeting"> <p>Welcome <%=session.getAttribute("name")%>!</p> </div> </div> <div id="my-menus"> <div> <form method="get" action="homePageForm.jsp"> <input class="menuItem" type="submit" value="http://stackoverflow.com/questions/15602584/Home"> </form> </div> <div> <form method="get" action="loginForm.jsp"> <input class="menuItem" type="submit" value="http://stackoverflow.com/questions/15602584/Members"> </form> </div> <div> <form method="get" action="loginForm.jsp"> <input class="menuItem" type="submit" value="http://stackoverflow.com/questions/15602584/Player Stats"> </form> </div> <div> <form method="get" action="loginForm.jsp"> <input class="menuItem" type="submit" value="http://stackoverflow.com/questions/15602584/Create League"> </form> </div> <div> <form method="get" action="loginForm.jsp"> <input class="menuItem" type="submit" value="http://stackoverflow.com/questions/15602584/Join league"> </form> </div> <div id="logout"> <form method="get" action="loginForm.jsp"> <input class="menuItem" type="submit" value="http://stackoverflow.com/questions/15602584/Logout"> </form> </div> </div> </div></body>\[/code\]\[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
XImageTransform.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\]
My goal is to move the logout button to the far right, without loosing the ability of clicking on them.Now, I have tried position relative and absolute and this moves the button to the right, but then the buttons are no longer clickable.