Wordpress CSS (Side Bar) Problem

Hey I'm back again!!!!

The previous problems are not completely solved. I've decided to ask in bits and pieces. I want to ask is that in my layout, the sidebar is appearing beneath the content div. Though it is appearing on the right side, where it is supposed to be, but the vertical position is not right. It's happening in mozilla and chrome and only on the main page (index.php).

My link is saadi.000a.biz

Waiting for your reply

 

can you upload css file ?

 

sure.

/*
Theme Name: SimpleGreyBlack
Theme URI: http://saadi.000a.biz
Description: A theme by <a href="http://saadi.000a/biz">Muhammad Saad</a>.
Version: 1
Author: Muhammad Saad
Author URI: http://saadi.000a.biz
*/

* {
margin: 0;
padding: 0;
}

ol, ul {
list-style: none;
}

html, body {
background: #FFFFFF url(images/background_grain.gif);                              
height: 100%;
margin:0;
font-family: georgia, "Times New Roman", times, serif;
font-size: 13px;pos
line-height: 150%;
letter-spacing: 1px;
}

.header_div {
height: 100px;
background: #000 repeat-x;
}

.header_div .description{
bottom: 3px;
color: #fff;
font-size: 14px;
}

h1 {
padding-left: 50px;
padding-top: 25px;
font-family: "Times New Roman", times, serif;
color: #fff;                       
font-size: 30px; 
text-shadow:0 1px 0 #fff, 0 -1px 0 #000;
} 

h1 a{
color: #ffffff;
text-decoration: none;
}

h1 a:visited {
color: #ffffff;
text-decoration: none;
}

h1 a:hover {
color: #ffffff;
text-decoration: none;
}

.main_content {
width: 100%;
height: 100%;
}

.wrap {
background: #cccccc;
border: solid black;
width: 980px;
overflow: hidden;
margin:20px auto;
}

.sub_container {
width: 53%;
float: left;
background: #fff;
clear: left;
border-style: solid;
border-width: 10px;
border-color: #efefef;
border-color: rgba(239,239,239,0.40);
margin: 10px auto 10px 1px;
}

/*.post {
width: 585px;
background: #fff;
bottom: 50px;
border-radius: 2px, 2px, 2px, 2px; 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
*/
.entry {
clear: both;
top: 55px;
}

.entry p {
font-family: "Trebuchet MS", sans-serif;
padding: 10px;
}

.post-cat {
background: url(images/mini-category.gif) no-repeat left center;
padding-top: 25px;
padding-left: 10px;
float:left;
font-size: 95%;
color: #999999;
}

.post-comments {
background: url(images/mini-comments.Gif) no-repeat left center;
padding-right: 30px;
padding-top: 25px;
float: right;
font-size: 95%;
}

.divider {
width: 450px;
margin-left: auto;
margin-right: auto;
top: 5px;
bottom: 15px;
}

#side_bar {
position: relative;
width: 33%;
float: right;
margin: 0 1px auto auto;
border: solid black 1px;
}

.side_bar p {
padding: 1px;
}

.side_bar .title {
}

.ul-cat {
	list-style: none;
	margin:0px 0px 15px;
	padding:0px;
	border-bottom: 1px solid #dceeb7;
}
.ul-cat li{
	margin: 0px;
	padding: 2px 0px 2px 20px;
	border-top: 1px solid #dceeb7;
	/*background: url(images/mini-category.gif) no-repeat left center;*/
}
.ul-cat li a, .ul-cat li a:visited{
	color: #495233;
	text-decoration: none;
}
.ul-cat li a:hover{
	color: #FF6600;
	text-decoration: none;
}
.ul-archives {
	list-style: none;
	margin:0px 0px 15px;
	padding:0px;
	border-bottom: 1px solid #dceeb7;
}
.ul-archives li{
	margin: 0px;
	padding: 2px 0px 2px 20px;
	border-top: 1px solid #dceeb7;
	/*background: url(images/mini-monthly-archive.gif) no-repeat left center;*/
}
.ul-archives li a, .ul-archives li a:visited{
	color: #495233;
	text-decoration: none;
}
.ul-archives li a:hover{
	color: #FF6600;
	text-decoration: none;
}


.post-title h2 {
font-family: 'Josefin Slab', arial, serif;
margin: -40px 0 0 10px;
} 

.navigation {
padding: 10px 0px;
}
.navigation a, .navigation a:visited {
color: #59770e;
}

.previous-entries {
float: left;
padding-left: 18px;
background: url(images/mini-nav-left.gif) no-repeat left center;
}

.comment_box {
position: relative;
float: left;
margin: 50px 0 30px 0;
background-color: #fff;
border-radius: 2px, 2px, 2px, 2px; 
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
width: 55%; 
padding: 7px;
overflow: auto;
}


.clear {
clear: both;
height: 4em;
}

p {
font-family:georgia, "times new roman", times, serif; 
font-size: 13px;
left: 5px;
right: 3px;
line-height: 150%;
letter-spacing: 1px;
} 

.header_intro p {
font-size: 12px;
left: 10px;
right: 1px;
}

a, a:visited {
color: #A91B33;
text-decoration: none;
}

a:hover {
color: #A91B33;
text-decoration: underline;
}

#title h3 a, #title h3 a:visited {
font-weight: normal;
font-size: 26px; 
font-family: Georgia, Times New Roman;
}

form {
margin: 0px;
padding: 0px;
}

.post-date {
position: relative;
width: 55px;
background: #db0000 /*url(images/red-post-date.gif)*/;
outline: 1px dashed #fffeee;
outline-offset: -5px;
padding-left: 9px;
padding-right: -2px;
box-shadow: -2px 2px 1px #000;
-webkit-box-shadow: -2px 2px 1px #000;
-moz-box-shadow: -2px 2px 1px #000;
height: 53px;
top: 10px;
left: -60px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
/*background: url(images/date-bg.gif) no-repeat; */
}

.post-month {
font-size: 13px;
text-transform: uppercase;
color: #ffeeee;
text-align: center;
display:block;
line-height: 10px;
padding-top: 10px;
padding-left: -3px;
margin-left: -3px;
}

.post-day {
font-size: 18px;
text-transform: uppercase;
color: #ffeeee;
padding-left: -3px;
text-align: center;
display:block;
line-height: 18px;
padding-top: 7px;
margin-left: -3px;
}

#respond {
position: relative;
float: left;
margin: 15px auto;
/*margin:15px 1px 20px 120px;*/
font-family: 'Josefin Slab', arial, serif;
font-size: 28px;
/*clear: both;*/
}

#comments {
position: relative;
float: left;
margin: 35px 1px 45px 30px;
font-family: 'Josefin Slab', arial, serif;
font-size: 28px;
}


#respond h3 {
padding-left: 30px;
}

.comment-group {
background: #aaa;
padding: 8px;
}

.commentlist {
border: solid black;
position: relative;
float: left;
margin: 0 auto 20px;
width: 60%; /*580px;*/
}

.commentlist p {
padding: 2px 2px;
right: 10px;
}

.commentlist li{
position: relative;
padding: 10px 2px;
background: #fff;
border-style: solid;
border-width: 5px;
border-color: #efefef;
border-color: rgba(239,239,239,0.40);
clear: both;
}

.commentlist .avatar {
position: relative;
float: right;
height: 45px;
width: 45px;
top: 5px;
left: 10px;
border: solid 1px #ededed;
border-style: solid;
border-width: 4px;
border-color: #efefef;
border-color: rgba(239,239,239,0.40);
padding: 1px;
background: #fff;
}

.avatar {
padding: 4px;
}

.commentlist .alt {
background: #f1fedb;
}

.commentlist cite, .commentlist cite a, .commentlist cite a:visited {
/*font-weight: bold;
font-style: normal;
font-size: 120%;
color: #CC6600;*/
padding: 2px;
}

.commentlist a, .commentlist a:visited {
font-weight: bold;
font-style: italic;
font-size: 120%;
color: #CC6600;
}

.commentlist small {
margin-bottom: 5px;
display: block;
font-size: 70%;
}

.children {
/*margin:15px 0 15px 50px;
background: #fff;
border-style: solid;
border-width: 10px;
border-color: #efefef;
border-color: rgba(239,239,239,0.40);
*/}

#commentform {
position: relative;
float: left;
top: 0;
left: 30px;
font: 110% Arial, Helvetica, sans-serif;
}

#commentform p {
padding: 6px 0px;
margin: 0px;
}

#commentform label{
font-weight: bold;
color: #666666;
font-size: 100%;
}

#commentform input{
height: 20px;
width: 160px;
background:#efefef;
border: 1px solid #bdd77f;
padding: 3px;
margin-top: 3px;
}

#commentform textarea {
width: 485px;
height: 115px;
background:#efefef;
border: 1px solid #bdd77f;
padding: 2px;
margin-top: 3px;
}

#commentform textarea:focus, #commentform input[type="text"]:focus {
background: #ffffff;
}

#commentform #submit{
width: 150px; 
color: #eee; 
text-transform: uppercase; 
margin-top: 10px;
background-color: #18a5cc;
border: none;
-webkit-transition: -webkit-box-shadow 0.3s linear;  /* -- CSS3 Transition - define which property to animate (i.e. the shadow)  -- */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); /* -- CSS3 Shadow - create a shadow around each input element -- */
background:  -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc); 
-webkit-border-radius: 4px;                    /* -- CSS3 - Rounded Corners -- */
-moz-border-radius: 4px; 
border-radius: 4px;
cursor: pointer;
}

.footer {
clear: both;
position: relative;
margin-top: 25px;
height: 150px;
background: #4f4f4f;
clear: both;
width: 100%;
}

.footer p {
color: #ffffff;
padding-left: 20px;
padding-right: 20px;
}

.footer .left-col{
width: 240px;
float: left;
margin-left: 20px;
}

.footer .right-col{
width: 220px;
float: right;
padding-right: 10px;
padding-left: 8px;
/*background: url(images/footer-right-bg.gif) no-repeat;*/
}

.footer h4 {
font: normal 146%/100% "Trebuchet MS", Tahoma, Arial;
color: #9cdbfb;
margin: 10px 0px 5px;
}

hr.clear {
clear:both;
visibility: hidden;
margin: 0px;
padding: 0px;
}

.recent-comments {
list-style: none;
margin: 0px;
padding: 0px;
line-height: 110%;
}

.recent-comments li{
background: url(images/mini-footer-comments.gif) no-repeat;
padding: 0px 0px 10px 20px;
}

.recent-comments a{
font-size: 105%;
line-height: 130%;
font-weight: bold;
}

.recent-posts {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 92%;
line-height: 110%;
}

.recent-posts li{
/*background: url(images/mini-footer-post.gif) no-repeat;*/
padding: 0px 0px 10px 20px;
}
.recent-posts a{
font-size: 115%;
line-height: 130%;
font-weight: bold;
}

#credits {
margin: 0px auto;
width: 760px;
color: #7a9299;
font-size: 85%;
line-height: 100%;
height: 2%;
}

#credits a, #credit a:visited{
color: #048db4;
}
.rss {
/*background: url(images/mini-rss.gif) no-repeat left center;*/
padding-left: 18px;
padding-bottom: 2px;
margin-left: 10px;
}

Code (markup):

 

add in style.css

add into .wrap

position:relative;

add into #side_bar

position: absolute;
top:10px;
right:20px;

 

Remove position:relative; and add position: absolute;

But footer not press to bottom, after sidebar.
Your simple template has many mistakes.
Write new easier than edit this.

CSS layouts - 2,3 column and other
maxdesign.com.au/articles/css-layouts/