Jump to content

[SOLVED] Sidebar Alignment Problem

Hitman

By Hitman
in CSS Help

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
https://forums.phpfreaks.com/topic/153981-solved-sidebar-alignment-problem/
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.

Archived

This topic is now archived and is closed to further replies.

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.