Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > html css > answers

content remain middle of the page

Familiar Sight
  
Join Date: Aug 2008
Posts: 175
#1: Aug 27 '09
Hey all,
I have recently started work on div based websites as suggested the great man acoder of this community advise me to learn divs.
I made a page using div. In my page i want that content remain at the middle of the page no matter the dimensions of the page are. I mean if the page resolution is 1024 * 768 or 1154 * 864 or 1280 * 768 or 1280 * 1024 or 1600 * 1200, at every resolution the content of my site remain in the middle of the page.



Here is the url of my page
PAGE URL

Can somebody help me out to sort out my problem as this community geeks advise me to learn div and i am expecting they will help me out to sort out my problem in this hour of trial.

kind regards,
Mohsin Rafique
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,629
#2: Aug 27 '09

re: content remain middle of the page

basic pattern:
Expand|Select|Wrap|Line Numbers
  1. div#my_id {
  2.     width: 500px; /* or whatever is appropriate */
  3.     margin: auto;
  4. }
Familiar Sight
  
Join Date: Aug 2008
Posts: 175
#3: Aug 27 '09

re: content remain middle of the page

Thanks for replying. I apply that property on my container named as #container but it is not working. Plz find my code and CSS Code. May be it will more help out to sort out my problem


Here is my HTML Source

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Div</title>
  6.         <link type="text/css" rel="stylesheet" href="includes/styles.css" />
  7.         <script type="text/javascript">
  8.         <!--
  9.         function MM_swapImgRestore() { //v3.0
  10.           var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  11.         }
  12.         function MM_preloadImages() { //v3.0
  13.           var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  14.             var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  15.             if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  16.         }
  17.         function MM_findObj(n, d) { //v4.01
  18.           var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  19.             d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  20.           if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  21.           for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  22.           if(!x && d.getElementById) x=d.getElementById(n); return x;
  23.         }
  24.         function MM_swapImage() { //v3.0
  25.           var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  26.            if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  27.         }
  28.         //-->
  29.         </script>
  30.     </head>
  31.     <body onload="MM_preloadImages('images/vision-active.png','images/history-active.png','images/mission-active.png','images/home-active.png','images/about-active.png','images/portfolio-active.png','images/services-active.png','images/contact-active.png')">
  32.     <!--start container-->
  33.     <div id="container">
  34.         <div id="error-fzf">
  35.             <div id="general">
  36.                 <div id="general-left">
  37.                     <div style="text-align:right;" class="heading"><img src="images/imagine-a-design-logo.png" width="212" height="183" alt="Image a Design" title="Image a Design" /></div>
  38.                 </div>
  39.                 <div id="general-right">
  40.                     <div><img src="images/spacer.gif" width="1" height="70" alt="" /></div>
  41.                     <div><img src="images/oops-error-404.png" width="203" height="18" border="0" alt="OOOPS! ERROR 404" title="OOOPS! ERROR 404" /></div>
  42.                     <div><img src="images/spacer.gif" width="1" height="5" alt="" /></div>
  43.                     <div><img src="images/bottom-line-small.png" width="302" height="2" border="0" alt="" /></div>
  44.                     <div><img src="images/spacer.gif" width="1" height="5" alt="" /></div>
  45.                     <div class="text-gray-10">You found this page becouse you somehow found a<br />page that doesn’t exist. Weird?</div>
  46.                     <div><img src="images/drop-shadow.png" width="227" height="20" border="0" alt="" /></div>
  47.                 </div>
  48.             </div>
  49.             <div class="fixer">&nbsp;</div>
  50.            </div>
  51.           <? include("bottom-menu.php");?>
  52.     </div>
  53.     <!--end container-->
  54.     </body>
  55. </html>
  56.  

and this my CSS

Expand|Select|Wrap|Line Numbers
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body{
  4.     margin:0px;
  5.     margin-top:100px;
  6.     padding:0px;
  7.     background:url(../images/img-01.png) top left;
  8. }
  9. form{margin:0px;}
  10. img{border:0px;}
  11. #container{
  12.     width:954px;
  13.     font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  14.     font-size:13px;
  15.     color:#666666;
  16.     margin:0px auto;
  17.     position:relative;
  18. }
  19. #error-fzf{
  20.     height:225px;
  21.     clear:both;
  22.     padding: 0px 5px 10px 10px;
  23. }
  24. #body{
  25.     background-image:url(../images/img-02.png);
  26.     height:602px;
  27.     clear:both;
  28.     padding: 0px 5px 10px 10px;
  29. }
  30. #body a { font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size:13px; color: #61C2D2; text-decoration:underline;}
  31. #body a:link {text-decoration: underline;}
  32. #body a:visited { text-decoration: underline; color: #61C2D2;}
  33. #body a:hover {text-decoration: none; color: #61C2D2;}
  34. #body a:active {text-decoration: underline; color: #61C2D2;}
  35.  
  36. #general{ clear:both; padding-top:10px;}
  37. #general #general-left{
  38.     float:left;    
  39.     width:460px;
  40. }
  41. #general #general-right{
  42.     float:right;
  43.     width:478px;
  44. }
  45. #general .heading{
  46.     height:24px;
  47. }
  48. #general .subheading{
  49.     height:19px;
  50. }
  51. #general .text-gray-10{
  52.     font-family: Arial, Helvetica, sans-serif;
  53.     font-size:10px;
  54.     color: #A2A2A2;
  55. }
  56. #general .text-orange-10{
  57.     font-family: Arial, Helvetica, sans-serif;
  58.     font-size:10px;
  59.     color: #FE6400;
  60. }
  61. #general .ul-customised{
  62.     padding-left: 15px;
  63.     margin-left: 0px;
  64.     list-style-image:url(../images/bullet.png);
  65. }
  66. #general .ul-customised li{
  67.     line-height:20px;
  68. }
  69. #general .contactus-padding-15{
  70.     padding-left:15px;
  71. }
  72. .general-input{
  73.     width:435px;
  74.     border:1px #181818 solid;
  75.     background-color:#141414;
  76.     font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  77.     font-size:12px;
  78.     color: #474747;
  79.     padding-left:10px;
  80.     padding-right:10px;
  81.     height:20px;
  82. }
  83. .general-textarea{
  84.     width:355px;
  85.     border:1px #181818 solid;
  86.     background-color:#141414;
  87.     font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  88.     font-size:12px;
  89.     color: #474747;
  90.     padding-left:10px;
  91.     padding-right:10px;
  92. }
  93. #contact{ clear:both;}
  94. #contact #contact-left{
  95.     float:left;    
  96.     width:350px;
  97. }
  98. #contact #contact-right{
  99.     float:right;
  100.     width:85px;
  101. }
  102. #bottom-menu{
  103.     clear:both;
  104.     padding: 0px 0px 10px 0px;
  105. }
  106. #bottom-menu #bottom-menu-left{
  107.     float:left;
  108.     width:630px;
  109. }
  110. #bottom-menu #bottom-menu-right{
  111.     float:right;
  112.     width:324px;
  113. }
  114. .fixer {
  115.     visibility: hidden;
  116.     clear: both;
  117.     display: block;
  118.     font-size: 1px;
  119. }
  120.  
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,629
#4: Aug 27 '09

re: content remain middle of the page

Quote:

Originally Posted by neovantage View Post

I apply that property on my container named as #container but it is not working.

it’s working for me (though I have to stretch my window quite some bit to see that), but I don’t use IE either…
Familiar Sight
  
Join Date: Aug 2008
Posts: 175
#5: Aug 27 '09

re: content remain middle of the page

Well i am using Firefox Mozilla and it is not even working there too. :(
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,629
#6: Aug 27 '09

re: content remain middle of the page

I’m using FF 3.5 / Mac and it’s working fine, although 954px is quite some width.
Familiar Sight
  
Join Date: Aug 2008
Posts: 175
#7: Aug 27 '09

re: content remain middle of the page

I am also using Firefox 3.5.2.
I think i cant explain you my problem. My Web page content is in center of the page. But i want to keep my data in the middle of the page too at any resolution.
i mean my data must not be at top position or bottom position of the page. I want it must remains at the middle of the page at any resolution. So is there any solution of it?
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,629
#8: Aug 27 '09

re: content remain middle of the page

tested the given link in Opera and Safari too, no problems. unless we have a different understanding of “in the middle of the page”.

EDIT:
and of course the window width must be larger than 1000px to see the effect at all.
Familiar Sight
  
Join Date: Aug 2008
Posts: 175
#9: Aug 27 '09

re: content remain middle of the page

Plz fine the attached image. you will see that my content is not in the middle of the page(Browser window.
Attached Thumbnails
problem.jpg  
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,629
#10: Aug 27 '09

re: content remain middle of the page

Quote:

Originally Posted by neovantage View Post

Plz fine the attached image. you will see that my content is not in the middle of the page

you mean vertical aligned?

I think there you need to use negative margins, but I can’t remember exactly right now.
Familiar Sight
  
Join Date: Aug 2008
Posts: 175
#11: Aug 27 '09

re: content remain middle of the page

Yeh vertical aligned that's what i mean. so how is that possible?
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,629
#12: Aug 27 '09

re: content remain middle of the page

there’s a bunch of options in this thread.
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,223 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved