see this i also add sorce code html page code <!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>trst</title> <link rel="stylesheet" href="css/reset.css" type="text/css" /> <link rel="stylesheet" href="css/style.css" type="text/css" /> <!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="css/ie7.css"> <![endif]--> <link rel="stylesheet" type="text/css" href="css/superfish.css" /> </head> <body id="sub-page"> <div id="site-wrapper"> <div id="header"> <!-- Header START here --> <div class="container"> <!-- Container START here --> <div id="top"> <!-- Top-Area START here --> <div id="logo"> <!-- Logo START here --> <h1><a href="index-2.html">testtttttttt</small></a></h1> </div> <!-- Logo END here --><!-- Search END here --> <div class="clear"></div> </div> <!-- Top-Area END here --> <ul class="sf-menu"> <!-- Main-Nav START here --> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a> <li><a href="test.html">test</a></li> <li><a href="test.html">test</a></li> <li><a href="test.html">test</a></li> <li><a href="test.html">test</a></li> <li><a href="test.html">test</a></li> <li><a href="test.html">test</a></li> <li><a href="test.html">test</a></li> </ul> <!-- Main-Nav END here --> <div id="slider"> <!-- Slider START here --> <div id="page-name"> <!-- Page-Name START here --> <h2>tessssssssssssssss</h2> <p>Home Page</p> </div> <!-- Page-Name END here --> </div> <!-- Slider ENDS here --> </div> <!-- Container ENDS here --> </div> <!-- Header END here --> <div id="content"> <!-- Content START here --> <div class="container"> <!-- Container START here --> <div id="main-colum"> <!-- Main-Colum START here --> <div class="post"> <!-- Post START here --> <h3>yestttttttttt</h3> <img src="images/blog/post-image2.jpg" width="615" height="125" /> <p class="pera1">Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text .</p> <p class="pera1">Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text </p> <p class="pera1">Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text </p> <p class="pera1">Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text Articles text </p> </div> <!-- Post END here --> <!-- Comments START here --> </div> <!-- Main-Colum ENDS here --> <!-- Sidebar END here --> <div class="clear"></div> </div> <!-- Container END here --> </div> <!-- Content END here --> </div> <div id="footer-wrapper"> <!-- Footer-Wrapper START here --> <div class="container"> <!-- Container START here --> <div id="top-footer"> <!-- Top Footer START here --> <!-- Top Footer END here --> <div id="bottom-footer"> <!-- Bottom Footer START here --> <p class="valid"> © All Rights Reserved. Rbeerslaw.com</p> <div class="clear"></div> </div> <!-- Bottom Footer START here --> </div> <!-- Container END here --> </div> <!-- Footer-Wrapper END here --> </div> </body> </html> Code (markup): -css---------- @charset "utf-8"; /** General Layout **/ * {margin:0; padding:0;} html, body { margin:0px; padding:0px; font-family: "Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif; font-size: 12px; position:relative; line-height: 1.7em; background: #fff; color:#6e6e6e; text-align:left; height: 100%; } .clear { clear: both; height: 0; width: 0; line-height: 0; font-size: 0px; } .hidden {display:none;} #site-wrapper { height: auto !important; height: 100%; min-height: 100%; position:relative; } div#footer-wrapper { height:100px; padding:0; margin-top:-500px; position:relative; background:url(../images/footer-bg.jpg) repeat-x left top; } .container {margin:0 auto; width:960px;} /** Typography **/ h1 {font-weight:normal; font-size:36px; line-height:38px;} h2 {font-weight:normal; font-size:28px; line-height:34px;} h3 {font-weight:normal; font-size:24px; line-height:30px;} h4 {font-weight:normal; font-size:20px; line-height:22px;} h5 {font-weight:normal; font-size:17px; line-height:19px;} h6 {font-weight:normal; font-size:14px; line-height:16px;} h1, h2, h3, h4, h5, h6 {font-family:Georgia, "Times New Roman", Times, serif; margin-bottom:4px;} small {font-size:12px; font-family:"Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif; line-height:12px;} .small {font-size:10px;} p {margin:0 0 22px 0; height:auto;} #content ul {list-style:circle; list-style-position:inside; padding-left:2px; margin-bottom:22px; padding-left:15px;} #content ol {list-style:decimal; list-style-position:inside; margin-bottom:22px; padding-left:15px;} blockquote {font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; line-height:2em; margin-bottom:10px;} #content cite {color:#434343;} strong {font-weight:bold;} .geo {font-family:Georgia, "Times New Roman", Times, serif; font-size:13px;} /** Header **/ #home-page #header {position:relative; background:url(../images/home_bg.jpg) repeat-x left top; height:570px; overflow:hidden;} #sub-page #header {position:relative; background:url(../images/sub_bg.jpg) repeat-x left top; height:385px; overflow:hidden;} #top {position:relative; height:120px; overflow:hidden;} #logo {height:101px; width:282px; display:block; background:url(../images/logo.png) no-repeat; text-indent:-9999px; float:left;} #logo h1 , #logo h1 a {display:block; height: 100%; width: 100%; text-indent:-9999px;} #search {float:right; margin-top:55px; position:relative;} #search-box {height:23px; width:163px; display:block; background:url(../images/search-bg.png) no-repeat left top;border:none; padding:9px 0px 0px 7px; font-size:11px;} #search-submit {height:14px; width:13px; display:block; float:right; background:url(../images/search-submit.png) no-repeat right top; border:none; position:absolute; right:8px; top:8px;cursor:pointer;} .sf-menu li a.selected {font-weight:bold; color:#176c97 !important; background:url(../images/nav-hover.jpg) repeat-x left top;} .sf-menu li li a.selected {font-weight:bold; color:#176c97 !important; background:none;} /** Slider **/ #home-page #slider {background:url(../images/slider-bg.jpg) no-repeat center top; width:960px; height:380px;} #sub-page #slider {background:url(../images/sub-slider-bg.jpg) no-repeat center top; width:960px; height:201px;} #slider #slide-desc {width:450px; float:left; margin-top:35px; color:#FFFFFF;} #slide-desc h2 {font-size:48px; line-height:54px; margin-bottom:18px; color:#FFFFFF;} #slide-desc p {width:390px; color:#94c5e1; margin-bottom:25px;} #slider #page-name {float:left; margin-top:65px; color:#FFFFFF;} #sub-page #slider h2 {font-size:48px; line-height:54px; margin-bottom:5px; color:#FFFFFF;} #sub-page #slider p {width:500px; color:#94c5e1; margin-bottom:25px;} a.viewportfolio { float:left; display:block; background:url(../images/viewportfolio.png) no-repeat left top; text-indent: -9999px; width:172px; height:35px; margin-right:30px; cursor:pointer; } a.viewportfolio:hover {background:url(../images/viewportfolio.png) no-repeat left bottom;} a.getquote { float:left; display:block; background:url(../images/getquote.png) no-repeat left top; text-indent: -9999px; width:172px; height:35px; cursor:pointer; } a.getquote:hover {background:url(../images/getquote.png) no-repeat left bottom;} #featured-work {position:relative; float:right; width:320px; right:90px; top:50px;} #featured-work img.ribbon {position:absolute; top:-4px; right:-25px; z-index:20;} #featured-work img.featured-img {padding:10px; background:#fff;} #featured-work p {background:#fff; padding:5px 10px;font-family:Georgia, "Times New Roman", Times, serif; font-size:13px;position:absolute; bottom:-8px; left:0;z-index:20;} #featured-work p a {color:#e2710e;} #featured-work p a:hover {color:#176c97; border-bottom:#e2710e 1px solid;} /** Content **/ #content {height:auto; overflow:auto; padding-bottom:375px; padding-top:20px;} #content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #content small {color:#000;} #content .title small {color:#000;} #content img {float:left; padding:5px; background:#ededed; border:#dddddd 1px solid; margin:6px 15px 8px 0;} #content #top-content {overflow:hidden; height:auto;} #content .title h3 {line-height:35px;} .welcome-box {width:630px; float:left; margin-right:30px; overflow:hidden;} .welcome-box .title {width:100%; display:block; overflow:hidden; margin-bottom:10px;} .box {width:300px; float:left; overflow:hidden; margin-right:30px; height:auto; position:relative;} .box .title {width:100%; display:block; overflow:hidden; margin-bottom:10px;} #content .box img.more-hover {position:absolute; left:0; bottom:21px; background:none; border:none;} #content #bottom-content {overflow:hidden; height:auto; margin-bottom:15px;} #content #bottom-content .box h3 {float:left;} #content .box a {color:#176c97;} #content .box a:hover {color:#e2710e; border-bottom:#176c97 1px solid;} #content .box .icon {float:right; border:0; background:none; margin:0; padding:5px 0 0;} .box-3 {margin-right:0;} #content .box .more {float:left; background:url(../images/more.png) no-repeat left top; display:block; width:72px; height:18px; font-size:10px; color:#FFFFFF; text-align:center; line-height:18px; cursor:pointer;} #content .box .more:hover {color:#FFFFFF; border:none; background:url(../images/more.png) no-repeat bottom left;} /** Main-Colum **/ #content #main-colum {width:630px; height:auto; overflow:hidden; margin-right:30px; float:left;} #content #main-colum h1, #content #main-colum h2, #content #main-colum h3, #content #main-colum h4, #content #main-colum h5, #content #main-colum h6 {margin-bottom:10px;} /** Sidebar **/ #content #sidebar {width:300px; height:auto; overflow:hidden; float:right;} #content #sidebar ul {list-style-type:none; list-style-position:outside;padding-left:0; height:auto; overflow:hidden;} #sidebar li.box {margin-bottom:60px;} #content #sidebar .widget {margin-right:0;} #content #sidebar #latest img:hover {background:#DDDDDD;} #content #sidebar #friends img {background:none; border:none; margin:0; padding:0;} #content #sidebar #friends li {float:left; border:none; padding:0 10px 10px 0;} #content #sidebar #contact-info img {float:none;} #content #sidebar #social-info img {border:none; background:none; padding:0;} #sidebar h3 {margin-bottom:10px;} #sidebar h3 small {color:#e2710e;} #sidebar ul li ul {list-style-type:none; list-style-position:outside; padding-left:0;} #sidebar ul li ul li {border-bottom:#c2c2c2 1px solid;padding:5px 0;} #sidebar ul li ul li a:hover {border:none !important;} /** Services **/ .services-post {float:left; height:auto; margin-bottom:40px;} .services-post .more {float:left; background:url(../images/more-wide.png) no-repeat left top; display:block; width:92px; height:18px; font-size:10px; color:#FFFFFF; text-align:center; line-height:18px; cursor:pointer;} .services-post .more:hover {color:#FFFFFF; border:none; background:url(../images/more-wide.png) no-repeat bottom left;} .service-img {float:left;} .services-post a {color:#176c97;} .services-post a:hover {color:#e2710e;} /** Portfolio **/ #content #full-width {height:auto; position:relative;} #content #full-width .box {float:left; width:300px; margin:5px 30px 10px 0; height:330px;} #content #full-width .box .port-img {margin:0 0 10px 0;} #content #full-width .box .port-img:hover {background:#DDDDDD;} #content #full-width .box h4 {margin-bottom:7px;} #content #full-width .box-3 {margin-right:0;} /** Blog **/ #content .post {height:auto; overflow:hidden; margin-bottom:60px;} #content .post h3 a {margin-bottom:4px;} #content .post h3 a:hover {color:#e2710e;} #content .post .meta {margin-bottom:4px;} #content #main-colum .seperator {background:url(../images/seperator.html) no-repeat top left; display:block; width:625px; height:10px; margin-bottom:25px;} #content .post a {color:#176c97;} #content .post a:hover {color:#e2710e;} #content .post img:hover {background:#DDDDDD;} #content .post .more {float:left; background:url(../images/more.png) no-repeat left top; display:block; width:72px; height:18px; font-size:10px; color:#FFFFFF; text-align:center; line-height:18px; cursor:pointer;} #content .post .more:hover {color:#FFFFFF; border:none; background:url(../images/more.png) no-repeat bottom left;} /** Contact us Form **/ #contact-warp { width:260px; float:left; text-align:left; height:auto; margin-bottom:10px; } .message { float:left; height:auto; width:500px; background:#FAE673; border:#FEBD63 1px solid; color:#CC6600; display:none; padding:10px; } #contact-warp p.label { width:260px; float:left; margin:0; color: #00FF33; } #contact-warp .special {display:none;} #contact-warp input { padding:5px; font-size:12px; width:260px; float:left; font-family: "Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif; margin-bottom:5px; background:url(../images/inputbg.html) repeat-x top left; border:#ababab 1px solid; } #contact-warp textarea { padding:5px; font-size:12px; width:550px; float:left; font-family: "Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif; margin-bottom:10px; background:url(../images/inputbg.html) repeat-x top left; border:#ababab 1px solid; } #contact-warp input.submit { float:left; background:url(../images/submit-comment.png) no-repeat left top; display:block; width:84px; height:24px; font-size:12px; color:#FFFFFF; text-align:center; line-height:18px; cursor:pointer; border:none; } #contact-warp input.submit:hover {background:url(../images/submit-comment.png) no-repeat left bottom;} /** Footer **/ #top-footer {height:280px; padding-top:50px; overflow:hidden;} #top-footer .box {position:relative;} #top-footer .title h3 {line-height:36px; color:#d0e6e7;} #top-footer .title small {color:#93acac;} #top-footer .title {margin-bottom:15px;} #top-footer .box cite {color:#93acac;} #top-footer .box p, #top-footer .box a {color:#ced5d9;text-decoration:none;} #top-footer .box a:hover {color:#fff;} #top-footer .box li {padding:5px 0 5px 2px; border-bottom:#436067 1px solid; list-style-type:circle; list-style-position:inside;} #top-footer .box li:first-child {border-top:#436067 1px solid;} #top-footer .box .bigbubble {background:url(../images/bigbubble.png) no-repeat top left; display:block; width:300px; height:142px;} #top-footer .box .bigbubble #twitter {height:95px; overflow:hidden; color:#6c6c6c; padding:10px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;} #top-footer .box .bigbubble #twitter p {color:#6c6c6c;} #top-footer .box .bigbubble #twitter a {color:#245b8f;} #top-footer .box .bigbubble #twitter a:hover {color:#153d63; text-decoration:underline;} #top-footer .box .bigbubble #twitter li {list-style-type:none; list-style-position:outside; border:none; padding:0;} #top-footer .box .follow {float:right; margin-right:20px;} #bottom-footer {height:40px; padding:0; margin:0; overflow:hidden;} #bottom-footer .valid {float:left; line-height:40px; color:#fff; margin:0 0;} #bottom-footer .valid a.small-logo {font-family:Georgia, "Times New Roman", Times, serif; font-size:13px;color:#e1f5f5;} #bottom-footer .valid a.small-logo:hover {font-family:Georgia, "Times New Roman", Times, serif; font-size:13px;color:#fff;} #bottom-footer ul#footer-nav {float:right;font-family:Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; font-size:10px; line-height:40px;} #bottom-footer ul#footer-nav li {display:inline; float:left;} #bottom-footer ul#footer-nav li a {color:#a1c2c2; margin-left:30px; } #bottom-footer ul#footer-nav li a:hover {color:#daeded;} .pera1 {color:#000000; } Code (markup):
I fixed it by floating alot of divs to the left, adding width: 100%; to them, and by removing some padding. Here is the file: http://www.mediafire.com/?zk1gtyyyzxb I checked it in every major browser, except IE6. Hope this will help!