html - Body only includes header? -


i have following html code:

<!doctype html> <html>     <head>         <title>contest coding</title>         <meta charset = 'utf-8'>         <meta name = 'description' content = 'the free programming competition everyone'>         <meta name = 'keywords' content = 'programming competition, coding competition, programming contest, coding contest, progrramming puzzles, coding puzzles, contestcoding, contest coding, c, c#, c++, python, ruby, java, javascript, php, haskell, perl, programming, coding'>         <meta name = 'author' content = 'lewis cornwall'>         <style type = 'text/css'>             body {                 margin: auto;                 width: 960px;                 font-family: helvetica, sans-serif;                 font-size: 16px;             }             #header {                 text-align: center;             }             #leaderboard {                 float: left;             }             #leaderboard table {                 width: 280px;             }             #puzzles {                 float: right;             }             #puzzles table {                 width: 640px;             }             .view_full {                 line-height: 2em;             }             h1 {                 font-size: 60px;                 line-height: .5em;             }             table {                 border-collapse: collapse;                 background-color: lightgrey;             }             table, th, td {                 padding: 10px;                 border: 1px solid #000;                 text-align: left;             }             {                 color: #000;                 text-decoration: none;             }             a:hover {                 text-decoration: underline;             }         </style>     </head>     <body>         <div id = 'header'>             <h1>contest coding</h1>             <p>the free programming competition everyone</p>         </div>         <div id = 'leaderboard'>             <h2>leaderboard</h2>             <table>                 <thead>                     <tr>                         <th>name</th>                         <th>points</th>                     </tr>                 </thead>                 <tbody>                     <tr>                         <td>                             <a href = ''>ed southall</a>                         </td>                         <td>20</td>                     </tr>                     <tr>                         <td>                             <a href = ''>mark bishop</a>                         </td>                         <td>20</td>                     </tr>                     <tr>                         <td>                             <a href = ''>krishna teja</a>                         </td>                         <td>18</td>                     </tr>                 </tbody>             </table>             <a href = '' class = 'view_full'>view full leaderboard &raquo;</a>         </div>         <div id = 'puzzles'>             <h2>latest puzzles</h2>             <table>                 <thead>                     <tr>                         <th>name</th>                         <th>solved by</th>                     </tr>                 </thead>                 <tbody>                     <tr>                         <td>                             <a href = ''>the truck driver - click view , solve</a>                         </td>                         <td>0</td>                     </tr>                     <tr>                         <td>                             <a href = ''>the 8 queens - click view , solve</a>                         </td>                         <td>0</td>                     </tr>                     <tr>                         <td>                             <a href = ''>palindromic primes - click view , solve</a>                         </td>                         <td>3</td>                     </tr>                 </tbody>             </table>             <a href = '' class = 'view_full'>view puzzles &raquo;</a>         </div>     </body> </html> 

and ran on google chrome. right clicked, selected 'inspect element', clicked on body section (so chrome should highlight whole body), highlighted #header section. why doesn't highlight whole page?

because forgot 'clear' floats.

<div style="clear: both;"></div> 

add on end of last floating div.


Comments

Popular posts from this blog

android - getbluetoothservice() called with no bluetoothmanagercallback -

sql - ASP.NET SqlDataSource, like on SelectCommand -

ios - Undefined symbols for architecture armv7: "_OBJC_CLASS_$_SSZipArchive" -