The header is ment to be at the top of the sidebar (Latest news/entries) but there is a gap, whats with that?
CSS
body { margin: 0; background: #43464D; font-family: "Trebuchet MS", Arial, Helvetica; font-size: 13px; color: #58AFFF; } h1 { font-size: 1.8em; color: #FFFFFF; text-align: justify; text-transform: uppercase; } h2 { font-size: 1.4em; color: #FFFFFF; } h3 { font-size: 1em; color: #FFFFFF; } h1 a{ color: #FFFFFF; text-align: justify; text-transform: uppercase; } h2 a{ color: #FFFFFF; } h3 a{ color: #FFFFFF; } p, ul, ol { margin-top: 0; line-height: 180%; } ul, ol { } a { text-decoration: none; color: #52AF35; } a:hover { background: none; text-decoration: underline; } /* Header */ #header { width: 940px; height: 160px; margin: 0 auto; background: #48577D; width: 100%; } /* Logo */ #logo { float: left; } #logo h1 { float: left; margin-left: 40px; padding-top: 60px; text-transform: uppercase; font-size: 2.6em; } #logo p { float: left; margin: 0; padding: 102px 0 0 2px; text-transform: lowercase; letter-spacing: .2em; font: bold 1.2em Arial, Helvetica, sans-serif; } #logo a { background: #48577D; text-decoration: none; color: #FFFFFF; } /* Menu */ #menu { width: 940px; height: 60px; margin: 0 auto; } #menu ul { margin: 0; margin-left: 30px; padding: 16px 0 0 10px; list-style: none; line-height: normal; } #menu li { float: left; } #menu a { margin-right: 3px; padding: 5px 20px; background: #48577D; text-transform: lowercase; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: normal; color: #FFFFFF; } #menu a:hover, #menu .navigation a { color: #FFFFFF; } #menu a:hover { text-decoration: underline; } /* Page */ #page { width: 860px; margin: 0 auto; padding: 40px 0; } /* Flash */ #flash { position: absolute; left: 530px; top: 50px; height: 50px; width: 500px; } /* Content */ #content { float: left; width: 560px; height: 500px; overflow: auto } .csoon { text-align: center; text-decoration: blink; } .post { } .post .title { padding: 5px 0; text-align: justify; color: #FFFFFF; text-transform: uppercase; } .post .title a { background: none; text-align: justify; color: #FFFFFF; text-transform: uppercase; } .post .meta { padding: 2px 10px; background: #48577D; border-top: 1px solid #000000; border-bottom: 1px solid #000000; text-transform: uppercase; text-align: left; font-size: 9px; color: #7690CF; } .post .entry { padding: 20px 0; text-align: justify; font-size: 1.2em; } /* Sidebar */ #sidebar { float: right; width: 258px; background: #43464d; border: 1px solid #D3D3D3; border-color: #48577D; } #sidebar ul { margin: 0; padding: 0px; list-style: none; } #sidebar li ul { padding: 10px; } #sidebar h2 { padding: 5px 10px; background: #48577D; font-size: 1.2em; } #sidebar p { padding: 10px; } /* Footer */ #footer { width: 940px; margin: 0 auto; padding: 20px 0; background: #48577D; border-top: 1px solid #000000; border-bottom: 1px solid #000000; color: #000000; width: 100%; } #footer p { margin: 0; line-height: normal; font-size: 12px; text-transform: uppercase; text-align: center; color: #58AFFF; }
PHP
<!-- start #sidebar --> <div id="sidebar"> <ul> <li> <h2>Latest Entries/news</h2> <ul> <li><a href="news_php.php">PHP Update!...</a><br /></li> <li><a href="news_blog.php">Blog is now functional...</a></li> <li><a href="news_welcome.php">WELCOME! First bit of news...</a><br /></li> </ul> </li> <li> <h2>Gallery Archives</h2> <ul> <li><a href="#">None Yet (0)</a></li> </ul> </li> <li> <h2>Links</h2> </li> </ul> <a href="http://www.geekstogo.com"><img src="images/GTG.png" width="250" height="75"></a> </div> <!-- end #sidebar -->