Hitman Posted April 14, 2009 Share Posted April 14, 2009 Hello guys, I am getting the hang of this kind of. Currently I am facing a minor problem. I cant seem to get the right sidebar to align to the top. Here is my code: HTML: <!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>Bulletin Board Designing</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body class="container"> <div id="header"> <div id="logo"><img src="logo.gif" width="300" height="100" /></div> </div> <div id="hdrnav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> </ul> </div> <div id="sidebar"> <div id="sidebar1"> <h2>Test</h2> This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest <h2>Test</h2> This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest This servers as a rest</div> <div id="sidebar2"> Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain Navigation here leftmain leftmain</div> </div> <div id="footer"> <p>Copyright © 2009, Bulletin Board Designing - All rights reserved!</p> </div> </body> </html> CSS: body { font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; color: #323D4F; background-color: #FFFFFF; font-size: 12px; margin: 0; } .container #header { height: 120px; padding: 0; } .container #logo { margin-bottom: 5px; padding: 5px 25px; background: #D9DFE4; border-bottom: 1px solid #4787A7; } .container #logodesc { padding: 0; } .container #hdrnav { padding: 5px; } .container #hdrnav ul { margin: 0; padding: 0; list-style: decimal; } .container #hdrnav li { display: inline; margin: 0; padding: 0; } .container #sidebar { padding: 12px 15px; } .container #sidebar1 { width: 80%; margin: 0; padding: 12px 15px; } .container #sidebar1 h2 { color: black; font-weight: bold; font-size: 1.8em; text-decoration: none; } .container #sidebar2 { float: right; width: 15%; } .container #footer { margin: 0; } .container #footer p { padding: 0; text-align: center; } Can someone take a look and seew hat I am doing wrong, thank you. Quote Link to comment https://forums.phpfreaks.com/topic/153981-solved-sidebar-alignment-problem/ Share on other sites More sharing options...
gizmola Posted April 14, 2009 Share Posted April 14, 2009 You need at minimum a couple of adjustments to your style.css for these 2 id's .container #sidebar1 { float: left; width: 80%; margin: 0; padding: 12px 15px; } .container #footer p { clear: both; padding: 0; text-align: center; } To understand why make sure you read up on the css box model. Quote Link to comment https://forums.phpfreaks.com/topic/153981-solved-sidebar-alignment-problem/#findComment-809360 Share on other sites More sharing options...
Hitman Posted April 14, 2009 Author Share Posted April 14, 2009 Thank you very much sir, that worked great and I will diffidently look into that. Quote Link to comment https://forums.phpfreaks.com/topic/153981-solved-sidebar-alignment-problem/#findComment-809398 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.