Jump to content

[SOLVED] Sidebar Alignment Problem

Hitman

By Hitman
in CSS Help

 Share

Recommended Posts

Hitman Newbie

Hitman

Posted
Posted

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. :)

Link to comment
Share on other sites
gizmola Prolific Member

gizmola

Posted
Posted

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.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.