Getting scrolling text to be in the right square/ - html

Question

A Happy new year to everyone,
I am having an issue to which I am clueless at answering. . I have 12 divs set up in a 4 across by 3 down layout. I just coded an attachment to box 5 but the scrolling text is at the bottom of the page and i am lost as how to get it to line up in the box 5 (tickets Pending). My css skills are lacking and could use some help
This is the code i was able to capture with inspect element.
{ inline style
position: relative;
overflow: hidden;
}
#pscroller1 {
width: 370px;
height: 120px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}
//code from CSS file
body {
background-color: #d0e4fe;
font-family: 'HP Simplified', Arial, Verdana, Helvetica, Sans-serif;
}
p#lastRun{
font-family: Garamond, 'Times New Roman', Georgia, serif;
font-variant: small-caps;
//font-weight: bold;
font-size:1.5em;
text-align:center;
background-color: black;
color: white;
}
h1 {
color: orange;
text-align: center;
}
a {color:#7FFFD4;
}
#mHeader, #mHeader2{
text-align: center;
font: Georgia, Times, serif;
font-size: small;
//font-weight: bold;
}
/* squares configuration */
#squareBox {
margin-left: auto;
margin-right: auto;
width: 1568px;
height: 700px;
//border: 2px solid #73AD21;
//border-radius: 10px;
//background: url(paper.gif);
background-color: tan;
}
#square1, #square2, #square3, #square4, #square5, #square6, #square7, #square8, #square9, #square10, #square 11, #square12{
background-color: WhiteSmoke;
width: 386px;
height: 203px;
outline-style: solid;
outline-width: 1px;
outline-color: green;
margin-left: 5px;
text-align: center;
}
#square1{
float: left;
margin-top: -15px;
}
#square2{
float: left;
margin-top: -15px;
}
#square3{
float: left;
margin-top: -15px;
}
#square4{
float: left;
margin-top: -15px;
}
#square5{
float: left;
margin-top: 10px;
}
#square6{
float: left;
margin-top: 10px;
}
#square7{
float: left;
margin-top: 10px;
}
#square8{
float: left;
margin-top: 10px;
}
#square9{
float: left;
margin-top: 10px;
}
#square10{
float: left;
margin-top: 10px;
}
#square11{
float: left;
margin-top: 10px;
}
#square12{
float: left;
margin-top: 10px;
}
.sqHeader{
font-weight: bold;
font-variant: small-caps;
text-align: center;
}
/* Table configuration */
th{
font-size: small;
font-variant:small-caps;
background-color: Wheat;
}
table, td, th{
margin: 1em; border-collapse: collapse;
border: 1px solid black;
padding: .15em;
margin-top: 2px;
font-size: 100%;
font-weight: bold;
margin-left: auto;
margin-right: auto;
}
tbody tr:nth-child(even) {
background-color: #F8F8F8 ;
}
tbody tr:nth-child(odd) {
background-color: #99FFCC;
}
tbody tr:hover {
background-color: #c9f;
}
#dataContainter, #rightNavBar, #leftNavBar{
height: 580px;
outline-style: solid;
outline-width: 1px;
outline-color: green;
}
#leftNavBar , #rightNavBar {
width: 146px;
background-color: light-gray;
font-size: 74%;
}
#leftNavBar {
float: left;
}
#rightNavBar {
float: right;
}
#filterButton{
margin-left: auto;
margin-right: auto;
}
.statusGray {
background-color: gray;
}
.statusRed {
background-color: red;
color: white;
font-weight: bold;
text-decoration: blink;
}
.statusYellow{
background-color: yellow;
color: black;
font-weight: bold;
}
.statusGreen{
background-color: green;
color: white;
font-weight: bold;
}
.statusBlue{
background-color: blue;
color: white;
font-weight: bold;
}
.regionRed {
background-color: #FF6600;
}
#displayResults tr:hover {
background-color: #FFFF00;
}
#customers tr.alt td {
color: #EAF2D3;
background-color: #000000;
};
input:focus {
background-color: yellow;
}
button:hover {
background-color: blue;
color: white
}
.dEntry:focus, .qSearch:focus {
background-color: #99FFFF;
}
.dEntry, .data {
font-family: 'HP Simplified', Arial, Verdana, Helvetica, Sans-serif;
//font-weight: bold;
//font-size: 80%;
//color: blue;
}
/*****************************************************
* generic styling for ALS elements: outer container
******************************************************/
/*Example CSS for the two demo scrollers*/
#pscroller1{
width: 370px;
height: 120px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
margin-bottom: 50px;
}
#pscroller2{
width: 700px;
height: 20px;
border: 1px solid black;
padding: 3px;
}
#pscroller2 a{
text-decoration: none;
}
.someclass{ //class to apply to your scroller(s) if desired
}
// code from html file
<body>
<div id="squareBox">
<div id="square1">
<span class="sqHeader"> Ticket Monitor</span>
<table id="A3">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="a3Data"></tbody>
</table>
</div>
<div id="square2">
<span class="sqHeader"> Unclaimed Jobs Monitor</span>
<table id="xerox">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="xeroxData"></tbody>
</table>
</div>
<div id="square3">
<span class="sqHeader">Monitor</span>
<table id="d3">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="Data3"></tbody>
</table>
</div>
<div id="square4">
<span class="sqHeader"> 2Hr Monitored by Marques (CA)-</span>
<table id="d4">
<th>Response</th>
<th>Longest-UnTouched Ticket</th>
<th>Status</th>
<th>#</th>
<tbody id="kaiserData"></tbody>
</table>
</div>
<div id="square5">
<span class="sqHeader">C 1-Hour Callback Monitor</span>
<table id="d5">
<th>Minutes</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="cdwHpgData"></tbody>
</table>
</div>
<div id="square6">
<span class="sqHeader">Tickets Pending Processing</span>
<table id="d6">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="pscroller1"></tbody>
</table>
</div>
<div id="square7">
<span class="sqHeader"> Monitor</span>
<table id="d7">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="Data7"></tbody>
</table>
</div>
<div id="square8">
<span class="sqHeader">EDI Shared Mail Box Monitor</span>
<table id="d8">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="Data8"></tbody>
</table>
</div>
<div id="square9">
<span class="sqHeader">Multi-Trips / Aged Monitor</span>
<table id="d9">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="Data9"></tbody>
</table>
</div>
<div id="square10">
<span class="sqHeader">#10 Monitor</span>
<table id="d10">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="Data7"></tbody>
</table>
</div>
<div id="square11">
<span class="sqHeader">#11 Monitor</span>
<table id="d11">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="Data8"></tbody>
</table>
</div>
<div id="square12">
<span class="sqHeader">#12 Monitor</span>
<table id="d12">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
</table>
</div>
</div>
</body>