CODEWITHSUNDEEP
csshtmlfluid-layout
JJJ
JJJ

Reputation: 3332

Center Website On All Screen Sizes

I need help centering my webpage on small screen sizes. My site looks fine at its normal width of 989px, but when it gets smaller it gets pushed to the left and there's a lot of white space on the right. I've been trying many ways to fix this but nothing works.

Now it's up to you guys. Hope you can help.

    <!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>
<style media="screen" type="text/css">
*{
   margin:0;
   padding:0;
}

body{
   text-align:center; /*For IE6 Shenanigans*/
   min-width:989px;
   margin:0;
   padding:0;

}

#header{background:url(/images/header.png) no-repeat;
border:;
padding:50px 0px 50px 0px;
text-indent:-9999px;
width:100%;
background-size:cover;

}
#menu{background:url(/images/nav-slice.png) repeat-x;
border:;
width:100%;
background-size:100%;
padding-bottom:20px;
padding-top:15px;
-moz-box-shadow: 0px 2px 2px 0px #888; 
-webkit-box-shadow: 0px 2px 2px 0px #888; 
box-shadow: 0px 2px 2px 0px #888; 
}

ul{padding:0;
margin:0;
overflow:hidden;
list-style-type:none;

}

li{

float:left;
display:inline-block;
padding-left:17%;/*70 divided by 800*/
padding-right:8%;
font-size:1em;

}

a.ali{text-decoration:none;
color: white;
padding-top:10px;
padding-bottom:0px;
text-align:center;
font-family:helvetica;
font-weight:bold;
font-size:1em;

}

a.ali:hover{color:blue;
}

#content{

padding:180px 0px 0px 0px;

float:left;
width:100%;
margin-top:20px;
margin-left:4.044%;/*40px*/
margin-right:2.022%;/*20px*/
margin-bottom:0px;
}


#footer{background:url(/images/footer-slice.png) repeat-x;
padding:15px 0px 15px 0px;
border:;
float:left;
width:100%;
margin-top:-40px;
}

a.tou{
font-family:arial;
text-size:10px;
color:white;
text-decoration:none;
}

a.tou:hover{
color:blue;
}

p{
font-family:arial;
text-size:10px;
color:white;

}

#wrapper{
margin-left:auto;
margin-right:auto;
width:80%;/*989px*/
max-width:80%;
min-width:989px;
-moz-box-shadow: 0px 0px 5px 5px #888; 
-webkit-box-shadow: 0px 0px 5px 5px #888; 
box-shadow: 0px 0px 5px 5px #888; 
}

.clear {
clear:both;
}

.title{
font-family:myriad pro;
color:#2e4d9b;
position:relative;
bottom:180px;
right:350px;
}

.sales-page{
background:url(/images/sales-page.png) no-repeat;
float:left;
position:relative;
bottom:140px;
left:6%;
padding-top:426px;
width:100%;
max-width:100%;
margin-bottom:-100px;
clear:both;
}

.get-website-now{
background:url(/images/get-website-now.png) no-repeat;
padding-top:40px;
padding-bottom:40px;
padding-left:18.20%;/*180px*/
padding-right:18.20%;
float:left;
position:relative;
bottom:230px;
left:31%;
margin-top:0px;
clear:both;
}
.get-website-now:hover{
opacity:0.9;
}

</style>
</head>
<body>

<div id="wrapper">

<div id="header">
<h1>Your Name And Logo</h1> 
</div><!--end header-->
<div id="menu">
<ul>
<li><a class="ali" href="index.html">Home</a></li>
<li><a class="ali" href="products.php">Products</a></li>
<li><a class="ali" href="contact.php">Contact</a></li>

</ul>
</div><!--end menu-->
<div id="content">
<h1 class="title">Home</h1>
<div class="sales-page"></div>
<a href="products.php" class="get-website-now" style=""></a>
</div><!--end content-->

<div id="footer">
<p><a class="tou" target="_blank" href="/terms-and-conditions.html">Terms and Conditions</a>&nbspFive80Nine Web Design All Rights Reserved 2013</p>
</div><!--end footer-->
<div class="clear"></div>

</div><!--end wrapper-->

</body>
</html>

Here is a link to my site: http://webdesign.five80nine.com

Upvotes: 0

Views: 5652

Answers (4)

Mokista
Mokista

Reputation: 1

Make article tag wraps all documents inside the body then put text align to center in css and all main tags container inside this tags. Put margin: 0 auto; while footer clear: both. Don't put margin 0 auto to footer if it has the same width of your header tags. Then refresh your browser and re-size it. It will place your document to the center.

cheers!

Mokista

Upvotes: 0

JJJ
JJJ

Reputation: 3332

I managed to fix the problem but this was not the solution I wanted. I added a table around the wrapper and played around with the width until I found the right width to make the page centered. The page is now centered in all sizes including tablet and mobile sizes.

If anyone else has a better solution I would love to hear it. :)

Upvotes: 0

bot
bot

Reputation: 4921

Avoid using % on your width to avoid these kind of problems. Especially on your wrapper use a fixed width instead. Then as what macky nyxzz suggests add 

margin: 0 auto

in your wrapper to make it centered in any screen resolution. I faced this kind of problem before and this was the fix. Here is a link for you to read more about How to Center a Website With CSS. Hope this helps. :)

UPDATE: you could test your website in different screen resolution here

Upvotes: 1

hello
hello

Reputation: 81

   #wrapper{
       margin: 0 auto;
    }

this will center your div in all screen resolutions you forgot to put auto

Upvotes: 0

Related Questions