How can I adjust the positioning of my table with the ID "table" to fit higher within the containing "box"? There seems to be a margin above the header that reads "Kalkulatory macierzowe". What steps should I take to resolve this issue? HTML
<div id = "box">
<div class = "table" id = "table">
<div id = "header">Kalkulatory macierzowe</div>
<div id = "table1">
<div class = "header">Wyznacznik [2x2]</div>
<form id = "row1">
<input type = "text" class = "det1"/><!--first row-->
<input type = "text" class = "det1"/>
</form>
<form id = "row2">
<input type = "text" class = "det1"/><!--second row-->
<input type = "text" class = "det1"/>
</form>
<div class = "count"><a href = "#" onclick="det('det1','caclValue2')">Wylicz</a></div>
<input type = "text" id = "calcValue2"/>
</div>
<div id = "table2">
<div class = "header">Wyznacznik [3x3]</div>
<form id = "row1"><!--first row-->
<input type = "text" class = "det"/>
<input type = "text" class = "det"/>
<input type = "text" class = "det"/>
</form>
<form id = "row2"><!--second row-->
<input type = "text" class = "det"/>
<input type = "text" class = "det"/>
<input type = "text" class = "det"/>
</form>
<form id = "row3"><!--third row-->
<input type = "text" class = "det"/>
<input type = "text" class = "det"/>
<input type = "text" class = "det"/>
</form>
<div class = "count" onclick="det(3,'det')"><a href = "#">Wylicz</a></div>
<input type = "text" id = "calcValue1"/>
</div>
<div id = "table3">
<div class = "header">Macierz odwrotna [2x2]</div>
<form id = "row1">
<input type = "text" class = "det2"/><!--first row-->
<input type = "text" class = "det2"/>
</form>
<form id = "row2">
<input type = "text" class = "det2"/><!--second row-->
<input type = "text" class = "det2"/>
</form>
<div class = "count" onclick="invertedMatrix(2,'det2')"><a href = "#">Wylicz</a> </div>
</div>
</div>
</div>
CSS
#box{
border-collapse:collapse;
width:1070px;
min-width: 1045px;
height: 600px;
min-height: 600px;
margin:auto;
background-color:rgb(25,88,179);
background:url('images/box.jpg');
box-shadow:0px 1px 1px 1px #FFFFFF;
-moz-box-shadow:0px 1px 1px 1px #FFFFFF;
-webkit-box-shadow:0px 0px 3px 1px #FFFFFF;
}
table{
position:relative;
top:0;
padding:0;
height:100%;
border-collapse:collapse;
}
#table{
border-collapse:collapse;
border-right:2px inset rgb(0,0,0);
border-left:2px inset rgb(0,0,0);
border-top:2px inset rgb(150,150,150);
border-bottom:none;
width:1067px;
min-width:1067px;
height: 599px;
min-height: 599px;
}
#header{
margin-top:0;
height:30px;
max-height:30px;
text-align:left;
font-size:16px;
font-family:Georgia, serif;
background-color:rgb(32,74,109);
color:rgb(255,255,255);
border-bottom:2px inset rgb(0,0,0);
clear:left;
}