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 »</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 »</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
Post a Comment