Need css help please!

Question

I'm having a problem in IE 7 & maybe 8 with my website. Here is the link to the staging site:
http://www.checkmandesign.com/staging/
In IE 7 the main content div seems to be pushed down from where it is supposed to be. I am on a Mac and it looks fine in Firefox & Safari. I can't view it on a PC so I am going by what I am being told by friends and also what I see on browser shots. I am new to coding so perhaps my css is messy and causing this. Can anyone help? I am also having another issue with a jquery script in my portfolio pages. The gallery is not loading properly in IE 7&8. It's a known issue which some people have written fixes in the forums (http://blog.ilexius.de/blog-post/2010/09/27/javascript-galleria-and-ie6-7-and-8-compatibil ity/)
I am pasting my CSS below in case anyone can see something that I am missing regarding the content issue:
body, h1, h2, p, ul, li {
margin: 0px;
padding: 0px;
font: normal 12px/28px Arial, Helvetica, sans-serif;
color: #7d7c7c;
text-align: left;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
#content h1 {
font-size: 14px;
font-weight: bold;
color: #FD1D13;
display: block;
padding-bottom: 10px;
#content h2 {
font-size: 14px;
line-height: 28px;
color: #7d7c7c;
font-weight: bold;
#content p {
font-size: 12px;
line-height: 16px;
color: #7d7c7c;
display: block;
margin-top: 0px;
margin-bottom: 16px;
#outerWrapper {
width: 980px;
margin: 0px;
#header {
height: 136px;
float: none;
clear: none;
#nav_bar {
height: 108px;
top: 172px;
padding-left: 110px;
padding-top: 10px;
padding-right: 40px;
#content {
width: 460px;
left: 280px;
padding-left: 290px;
background: #ffffff;
text-align: left;
margin-top: 1px;
padding-top: 62px;
#footer {
height: 70px;
padding-top: 60px;
padding-left: 100px;
clear: both;
font-family: Arial, Helvetica, sans-serif;
#footer p {
font-size: 10px;
line-height: 18px;
color: #7d7c7c;
text-align: center;
#footer p .footerLinks .footerLinks {
color: #7d7c7c;
text-decoration: underline;
#sidebar-left {
width: 140px;
padding-left: 130px;
float: left;
padding-top: 62px;
font-size: 13px;
#sidebar-right {
float: right;
width: 151px;
padding-left: 40px;
position: absolute;
top: 150px;
left: 751px;
height: 400px;
#mailingList {
font-size: 12px;
font-weight: bold;
color: #FD1D13;
#form1 {
padding-top: 20px;
.navbar-icon {
border-right: 1px solid #999;
padding-right: 5px;
margin: 0px;
z-index: 10;
#nav-bartext {
position: absolute;
z-index: 200;
#thumbnails {
height: 471px;
.clientList {
list-style: disc inside;
line-height: 16px;
font-size: 12px;
.footerLinks {
font-size: 10px;
color: #7d7c7c;
font-weight: normal;
#sidebar-left {
font-size: 14px;
line-height: 28px;
color: #1B0499;
#sidebar-right p img {
padding-bottom: 10px;

Answer 1

You can't have it both ways.  You can either float a container or you can position it. I prefer to float columns.
#sidebar-right {
    float: right;
    width: 151px;
    padding-left: 40px;
/**REMOVE ALL OF THIS**/
    position: absolute;
    top: 150px;
    left: 751px;
    height: 400px;
Learn CSS positioning in 10 Steps -
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Review Floats and Clearings -
http://css.maxdesign.com.au/floatutorial/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb