Center Website On All Screen Sizes
Question
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> Five80Nine 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
4 answers
solution1
1 2013-09-11 04:40:17
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
solution2
0 2013-09-11 03:48:32
#wrapper{
margin: 0 auto;
}
this will center your div in all screen resolutions you forgot to put auto
solution3
0 ACCPTED 2013-09-14 01:04:53
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. :)
solution4
0 2014-09-11 17:00:15
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.