Div with Javascript 2

<html>
<head>
    <title>Div Tutorial</title>

<script language="Javascript" type="text/javascript">
  function hideMainDiv()
  {
   var myObject = document.getElementById("MainDiv");
   myObject.style.visibility = "hidden";
  }
  function showMainDiv()
  {
   var myObject = document.getElementById("MainDiv");
   myObject.style.visibility = "visible";

  }

</script>

    <style type="text/css">

      #foodDiv
                        {
                            width: 361px;
                            height: 39px;
                            text-align: left;
                            background-color: #9999ff;
                            z-index: 102;

                        }
    </style>
</head>
<body style="background-color: black;">

    <div id="MainDiv" style="z-index: 101; left: 11px; width: 360px; position: absolute; top: 16px;
        height: 136px; background-color: white;">

            <div id="foodDiv">

            <input onclick="hideMainDiv()" id="Button1" type="button" value="Click ME" style="z-index: 100;
                    left: 276px; position: absolute; top: 6px"/>
            </div>

    </div>
<input onclick="showMainDiv()" id="btnShow" style="z-index: 102; left: 290px; position: absolute; top: 164px"
   type="button" value="Show Div" />
</body>
</html>