Someone

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <link href="css/qa.css" rel="stylesheet" type="text/css">
	<script type="text/javascript">
var xajaxRequestUri="https://research.mordor/QA/";
var xajaxDebug=false;
var xajaxStatusMessages=false;
var xajaxWaitCursor=true;
var xajaxDefinedGet=0;
var xajaxDefinedPost=1;
var xajaxLoaded=false;
function xajax_getSessionData(){return xajax.call("getSessionData", arguments, 1);}
function xajax_updateFileStatus(){return xajax.call("updateFileStatus", arguments, 1);}
function xajax_slow_function(){return xajax.call("slow_function", arguments, 1);}
	</script>
	<script type="text/javascript" src="../common/xajax/xajax_js/xajax.js"></script>
	<script type="text/javascript">
window.setTimeout(function () { if (!xajaxLoaded) { alert('Error: the xajax Javascript file could not be included. Perhaps the URL is incorrect?\nURL: ../common/xajax/xajax_js/xajax.js'); } }, 6000);
	</script>
<script type="text/javascript">

<!--

function toggleNotes(div)
{   
    if ((document.getElementById(div).style.display == '') || (document.getElementById(div).style.display == 'none'))
    {
        document.getElementById(div).style.display = 'block';
    }
    else
    {
        document.getElementById(div).style.display = 'none';
    }
}

showLoading = function()
{
    xajax.$('loading').style.display = 'block';
};

hideLoading = function()
{
    xajax.$('loading').style.display = 'none';
};

xajax.loadingFunction = showLoading;
xajax.doneLoadingFunction = hideLoading;

//-->
</script><title>Fingerprint QA</title>

</head>
<body>
<div class="debug_header"> <!-- Starting debug header -->
Debug set.&nbsp;

<div class="session_debug" id="session_debug" onClick="xajax_getSessionData(document.getElementById('session_debug').innerHTML)">Session</div>
</div> <!-- Closing debug header -->    
<div class="main_body_debug"><!-- Start main_body div-->
    <div class="sc_header">
        <div class="sc_logo"><img src="**" alt="**"></div>
        <div class="status_info">Something goes hereSomething goes hereSomething goes hereSomething goes here</div>

    </div>
    <div class="sc_body">
        <div class="side_listing">This is the side listing.<br><br></div>
        <div class="main_listing_container">
            <div class="main_listing"><div id="loading" class="loading"><img src="images/updating.gif" alt="Updating.."></div><div class="linecontainer"><div class="filename_display"><a class="marginleft" href="**">**</a></div><div class="file_display" >**</div>

<div class="md5_failed">**</div><div class="filestatus_display" id="fd0" style="background:#6633CC">
<select id="status0" name ="status0" onChange="xajax_updateFileStatus('**','**',this.value, 0)"><option value="queued">queued</option>
<option value="stopped">stopped</option>
<option value="running">running</option>
<option value="operator" SELECTED>operator</option>
<option value="success">success</option>
<option value="failure">failure</option>
</select>
</div>

<div class="notes_wrapper" onclick="toggleNotes('notes0')">Notes<div class="notes" id="notes0"><div class="closebox"><img src="images/x.jpg" alt="x"></div>Content Content Content Content Content Content Content Content Conten tConte nt<br><input type="button" class="updatenotes" value="Update"></div></div></div>
        </div>
    </div>
</div><!--End main_body div-->
</body>

</html>

The relevant CSS:

html,body
{
    margin: 0px 0px 0px 0px;
}

div, p, a, body, td, select
{
    font-family: helvetica;
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
}

DIV.session_debug
{
    padding-left: 5px;
    padding-right: 5px;
    border: black dashed 1px;
    font-family: Arial;
    z-index: 9;
    background: yellow;
}

DIV.debug_header
{
    position: absolute;
    top: 0px;
    float: left;
    width:100%;
    z-index: 9;
}

DIV.main_body_debug
{
    position: absolute;
    top: 40px;
    width: 100%;
    height: 100%;
    font-family: "Arial sans-serif";
}

DIV.main_body
{
    position: absolute;
    top: 0px;
    font-family: "Arial sans-serif";
}

DIV.sc_logo
{
    margin: 0px 0px 0px 0px;
    height: 100px;
    float: left;
}

DIV.status_info
{
    padding: 10px;
}

DIV.sc_header
{
    width: 100%;
    height: 100px;
}

DIV.sc_body
{
    height: 100%;
}

DIV.side_listing
{
    width: 100px;
    float: left;
    background: white;
    width: 20%;
}

DIV.main_listing
{
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    padding: 0px;
}

DIV.main_listing_container 
{
    background:white none repeat scroll 0%;
    float:right;
    padding:0px;
    width:80%;
}

DIV.filename_display
{
    background: white;
    clear: both;
    float: left;
    width: 20%;
}

DIV.file_display
{
    background: white; 
    float: left;
    width: 10%;
}

a.marginleft
{
    margin-left:10px;
    text-decoration: none;
}

DIV.filestatus_display
{
    background: white;
    padding: 0px;
    float: left;
    width: 20%;
}

DIV.md5_passed
{
    background:#66FF66;
    float: left;
    width: 30%;
    text-align: center;
}

DIV.md5_failed
{
    background:red;
    float: left;
    width: 30%;
    text-align: center;
}

DIV.loading
{
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}

.notes
{
    background: #FFFF66;
    border:1px solid black;
    z-index:2;
    display: none;
    position: absolute;
}

DIV.notes_wrapper
{
    background: yellow;
    float: left;
    clear: right;
    width: 20%;
} 

select
{
    font-size: 10px;
    background: #CCCCCC;
    border: 0;
}

DIV.linecontainer
{
    background: black;
    padding: 1px;
    float: left;
    width: 100%;
}

.closebox
{
    float: right;
    width: 10px;
    height: 10px;
    color: red;
    position: relative;
    top: -3px;
    text-align: center;
    padding: 0px;
}

.updatenotes
{
    border: black dashed 1px;
    font-family: arial;
    background: yellow;
    float: right;

}

The javascript to toggle the visibility of the notes div: 

function toggleNotes(div)
{   
    if ((document.getElementById(div).style.display == '') || (document.getElementById(div).style.display == 'none'))
    {
        document.getElementById(div).style.display = 'block';
    }
    else
    {
        document.getElementById(div).style.display = 'none';
    }
}