Div parent and child div

HTML & CSS
1

Hello, I’m kinda new to this CSS, I have many books but I’m still a beginner. So I have a problem. I have a calendar and I have another div below this calendar. With a scroll and different background color to that div. But nothing seems to work for me to do what I want. So help me if you can.:).Thank you!

Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="calendar">

<table width="257" height="" cellspacing="4" cellpadding="4" border="1" bgcolor="#eaf5e5">
  <tr>
    <th height="25" scope="col">&nbsp;</th>
    <th height="25" scope="col" ><img src="img/arrow1.gif"  align="right" /></th>
    <th height="25" colspan="4" scope="col"><font face="Courier New, Courier, monospace" size="-1" color="#038a9d">SEPTEMBRE 2010</font></th>
    <th height="25" scope="col"><img src="img/arrow2.gif" align="left" /></th>
  </tr>
  <tr>
    <th width="24" height="25" scope="col">D</th>
    <th width="24" height="25" scope="col">L</th>
    <th width="24" height="25" scope="col">M</th>
    <th width="24" height="25" scope="col">M</th>
    <th width="24" height="25" scope="col">J</th>
    <th width="24" height="25" scope="col">V</th>
    <th width="24" height="25" scope="col">S</th>
  </tr>
  <tr>
    <td width="24" height="25">1</td>
    <td width="24" height="25">2</td>
    <td width="24" height="25">3</td>
    <td width="24" height="25">4</td>
    <td width="24" height="25">5</td>
    <td width="24" height="25">6</td>
    <td width="24" height="25">7</td>
  </tr>
  <tr>
    <td width="24" height="25">8</td>
    <td width="24" height="25">9</td>
    <td width="24" height="25">10</td>
    <td width="24" height="25">11</td>
    <td width="24" height="25">12</td>
    <td width="24" height="25">13</td>
    <td width="24" height="25">14</td>
  </tr>
  <tr>
    <td width="24" height="25">15</td>
    <td width="24" height="25">16</td>
    <td width="24" height="25">17</td>
    <td width="24" height="25">18</td>
    <td width="24" height="25">19</td>
    <td width="24" height="25">20</td>
    <td width="24" height="25">21</td>
  </tr>
  <tr>
    <td width="24" height="25">22</td>
    <td width="24" height="25">23</td>
    <td width="24" height="25">24</td>
    <td width="24" height="25">25</td>
    <td width="24" height="25">26</td>
    <td width="24" height="25">27</td>
    <td width="24" height="25">28</td>
  </tr>
  <tr>
    <td width="24" height="25">29</td>
    <td width="24" height="25">30</td>
    <td width="24" height="25">31</td>
    <td width="24" height="25">&nbsp;</td>
    <td width="24" height="25">&nbsp;</td>
    <td width="24" height="25">&nbsp;</td>
    <td width="24" height="25">&nbsp;</td>
  </tr>
</table>
<div id="scrooling">

<p><font face="Courier New, Courier, monospace" size="+1" color="#67bb5d"><strong>25 SEPTEMPRE 2010</strong></font><font face="Arial, Helvetica, sans-serif" size="-1" color="#058a93">
    </font></p>
<ul><font face="Arial, Helvetica, sans-serif" size="-1" color="#058a93">
  <li>Conge FGA et FP</li>
    <li>Debut du Marie</li>
    <li>Debut du DEP en dessin industriel</li></font></ul>

</div>
</div>
</body>
</html>

And the css file:


@charset "utf-8";
/* CSS Document */

th {
    border:none;
    font-family:"Courier New", Courier, monospace;
    font-size:13px;
    color:#a7b4ba;
    font-style:normal;
    text-align:center;
}

td  {
    background-color:#ffffff;
    text-align:center;
}
#calendar {
    position:relative;
    top: 5px;
    left: 5px;
    z-index: 20;
    height: 350px;
    width: 257px;
    background-color: #eaf5e5;    
    border:solid 1px #999;
}

#scrolling {
    position:absolute;
    top: 380px;
    width: 188px;
    height: 116px;
    z-index: 10;
    overflow: scroll;
    background-color:#FFF;    
}
2

you have at least 1 significant typo in our code.

3

Yup - scrolling is not the same as scrooling - CSS works on the basis that you spell things right, rather than just close…

4

Thank you for your help!