Tim Aych Tim Aych - 2 months ago 5
HTML Question

Can't get div flush with top of page

I'm having trouble getting my wrapper div to become flush with the very top of the page. I've set the body margin/padding to zero, as well as the top margin for the wrapper div to zero with no success.

CSS:

body {
font-family: Helvetica, sans-serif;
background-image:url('../images/bg1.jpg');
padding:0px;
margin:0px;
}

#ratio{
text-align: center;
}

div#nav {
text-align: center;
margin: 0;
}

#nav img{
padding: 5px 40px 20px 40px;
}

#task_table{
width: 775px;
table-layout: fixed;
text-align: left;
font-size: 12px;
border-collapse:collapse;
}

#task_table td{
border-bottom: 1px solid black;
padding-top: 10px;
padding-bottom: 10px;
}

#task_table td:first-child{
width: 220px;
padding-left: 15px;
}

#task_table td:nth-child(2){
width:70px;
padding-left: 20px;
}

#task_table td:nth-child(3){
padding-left: 25px;
}

#task_table td:nth-child(4){
text-align:right;
padding-right: 15px;
}

#wrapper {
width: 775px;
margin: 0 auto;
background-color: #fff;
margin-top:0px;
}

#datecaption {
font-size: 10px;
padding-left: 15px;
padding-bottom: 5px;
}

#hourscaption {
font-size: 10px;
padding-left: 195px;
}

#taskcaption {
font-size: 10px;
padding-left: 30px;
}

#taskbar {
background: #CCCCCC;
padding: 15px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}

#task_text {
margin-left: 20px;
width: 330px;
}

#hours_text {
margin-left: 20px;
width: 50px;
}

.delete, .successful, .unsuccessful {
padding: 0px 4px 0px 4px;
}


html:

<body>

<div id="wrapper">

<div id="nav">

<a href="index.php"><img src="images/tab1.jpg" class="navimg" id="tab1"/></a>

<a href="completed.php"><img src="images/tab2.jpg" class="navimg" id="tab2"/></a>

<a href="failed.php"><img src="images/tab3.jpg" class="navimg" id="tab3"/></a>

</div>

<span id="datecaption">DATE</span>

<span id="hourscaption">HOURS</span>

<span id="taskcaption">TASK</span>

<form action="index.php" method="POST" style="margin:0;padding:0;" id="submit">

<div id="taskbar">

<select name="month" id="monthDD"><option>January</option><option selected="selected">February</option><option>March</option><option>April</option><option>May</option><option>June</option><option>July</option><option>August</option><option>September</option><option>October</option><option>November</option><option>December</option></select><select name="day" id="dayDD"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option selected="selected">14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option></select> <select name="year" id="yearDD">

<option>2012</option>

<option>2013</option>

<option>2014</option>

</select>



<input type="text" name="hours" id="hours_text" />

<input type="text" name="task" id="task_text" />

<input type="Submit" value="Add Task" style="margin-left: 20px;" />

</div></form>



<table id="task_table"><tr id="row157"><td>February 14, 2012</td><td>0</td><td>Read</td><td><a href=""><img src="images/trash.png" class="delete" name="157"></a>

<a href=""><img src="images/delete.png" class="failed" name="157"></a>

<a href=""><img src="images/check.png" class="successful" name="157"></a></td></tr><tr id="row158"><td>February 14, 2012</td><td>1</td><td>Work on tasks project</td><td><a href=""><img src="images/trash.png" class="delete" name="158"></a>

<a href=""><img src="images/delete.png" class="failed" name="158"></a>

<a href=""><img src="images/check.png" class="successful" name="158"></a></td></tr></table>



</div>

</body>


Anyone know what's up? Thanks.

It seems to be working in the jsFiddle, oddly; http://jsfiddle.net/jsNS8/

Answer

I would use the position:absolute attribute.

#wrapper
{
position:absolute;
top:0px
}
Comments