By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,869 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

How do i center align divs

roula
P: 18
I HATE DIVS AND DIFFERENT BROWSERS!!! i spent the whole day and night searching for a way to center align stupid divs, the problem is that the code is so sensitive, i lost my mind trying to make them work in a certain way (like some should scroll with a fixed background and others shouldn't scroll bla bla..) and the divs are nested and positioned in different ways and if i change something it gets messed up and what works in in IE doesn't work in firefox and vice versa... anyways i managed at the end to get almost what want, now i have 2 main problems:
  1. center all divs together in the center of the page wihtout messing up their positions
  2. be able to dispaly a div with a background that doesnt scroll, and over it should appear another div with text in it that scrolls

for problem 1 here's some code, i dont know if it's not working because of the position (absolute or fixed or relative or whatever):
html code:

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css" media="screen">
  2. body{
  3.     /*background-image:url('<? echo $this->webroot?>/img/bge.jpg');*/
  4. }
  5. #headerinner{
  6.     background-image:url('<? echo $this->webroot?>/img/bg01.jpg');
  7. }
  8. </style>
  9. <!--[if lt IE 7]>
  10. <style>
  11. * html #left1, #left2, #left3, #right, #bottom, #contents {position:absolute;}
  12. * html, * html body{overflow:hidden;height:100%;}
  13. * html #outer {height:100%;overflow:auto}
  14. /* ie only styles below */
  15. /* mac hide \*/
  16.  
  17. * html #headerinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
  18. * html #headerinner{margin-right:17px;}
  19. * html #header{position:absolute;}
  20.  
  21. /* end hide*/
  22.  
  23.  
  24. /* Child Combinator Override Method */
  25. #wrapper {height: 1%;}
  26. #inner>#wrapper {height: auto;}
  27.  
  28. /* Mac-modified Tan Hack Method */
  29. * html #wrapper {height: 1%;} /* for IE/Win */
  30. *>html #wrapper {height: auto;} /* for IE5/Mac */ 
  31. </style>
  32. <![endif]-->
  33. </head>
  34. <body>
  35. <div id="main">
  36.     <div id="header">
  37.         <div id="headerinner">
  38.             <img src="<? echo $this->webroot?>img/spacer.gif" width="800" height="255">
  39.         </div>            <!-- headerinner -->
  40.     </div>                <!-- header -->
  41.     <div id="left1">
  42.         <img src="<? echo $this->webroot?>img/bg03.jpg" width="257" height="97">
  43.     </div>
  44.     <div id="left2">
  45.         <img src="<? echo $this->webroot?>img/bg06e.jpg" width="257" height="181">
  46.     </div>
  47.     <div id="left3">
  48.         <img src="<? echo $this->webroot?>img/bg07.jpg" width="257" height="217">
  49.     </div>
  50.     <!-- End -->
  51.     <!-- Begin name="contents" -->
  52.     <div id="outer">
  53.         <div id="inner">
  54.             <div id="contents" style="background-image:url('<? echo $this->webroot?>/img/bg04.jpg');background-repeat: no-repeat;z-index:-1;">
  55.             </div>
  56.             <div id="wrapper"> 
  57.  
  58.     <?php
  59.                 if ($session->check('Message.flash '))
  60.                 {
  61.                     $session->flash();
  62.                 }
  63.                 echo $content_for_layout;
  64.     ?>
  65.                 <div id="clear"></div>
  66.  
  67.             <!-- End of div: wrapper -->
  68.             </div> 
  69.         <!-- End of div: inner -->
  70.         </div>
  71.     </div>
  72.     <!-- End of div: outer -->
  73.     <div id="right">
  74.         <img src="<? echo $this->webroot?>img/bg05.jpg" width="69" height="495">
  75.     </div>
  76.     <div id="bottom">
  77.         <img src="<? echo $this->webroot?>img/bg08.jpg" width="800" height="50">
  78.     </div>
  79. </div>
  80. <!-- InstanceEndEditable -->
  81.  
  82. </body>
  83. <!-- InstanceEnd --></html>
css code:


Expand|Select|Wrap|Line Numbers
  1. html {padding:0px;margin:0;}
  2.  
  3. /* ***************************** Summary page and detail page generic definitions */
  4. body    {
  5.     padding-top:255px;                    /*match height of fixed header*/
  6.     margin-top:-255px;                    /*match height of fixed header*/
  7.     padding-left:257px;                    /*match width of fixed sidebar*/
  8.     margin-left:-257px;                    /*match width of fixed sidebar*/
  9.     color: #000;
  10.     font-family: Tahoma, Arial, sans-serif;
  11.     font-size: 10pt;
  12.     background-color: #6666CC;
  13.     background-repeat: no-repeat;
  14.     background-attachment: fixed;
  15. }
  16.  
  17. * {padding:0;margin:0;}
  18.  
  19. /* *********************************** Navigation bar on left */
  20. #left1, #left2, #left3 {
  21.     border: none;
  22.     position:fixed;/* for good browers */
  23.     left:0;
  24.     width:257px;
  25.     height: 100%;
  26. }
  27. #left1{top:255px;}
  28. #left2{top:352px;}
  29. #left3{top:533px;}
  30.  
  31. #left1, #left2, #left3 img {    border: none;}
  32.  
  33. #right{
  34.     border: none;
  35.     position:fixed;/* for good browers */
  36.     left:731px;
  37.     top:255px;
  38.     width:69px;
  39.     height:495px;
  40. }
  41.  
  42. #bottom{
  43.     border: none;
  44.     position:fixed;/* for good browers */
  45.     left:0px;
  46.     top:750px;
  47.     width:800px;
  48.     height:50px;
  49. }
  50.  
  51. #contents{
  52.     border: none;
  53.     position:fixed;/* for good browers */
  54.     left:257px;
  55.     top:255px;
  56.     width:474px;
  57.     height:495px;
  58. }
  59.  
  60. * html a:hover {visibility:visible}
  61. /* ************************** Defines the header content */
  62. #header{
  63.     position:fixed;                /* for good browsers*/
  64.     left:0;
  65.     top:0;
  66.     padding:0;
  67.     width:800px;                /* Sets the minimum width of the page */
  68.     height:255px;                     /* the height you want the header to be*/
  69. }
  70.  
  71. #headerinner{                        /* header content goes inside here*/
  72.     height: 255px;                    /* match height of fixed header*/
  73.     position:relative;
  74.     background-repeat: no-repeat;
  75. }
  76.  
  77. #main{
  78.     margin:0px auto;
  79.     border:10px solid red;
  80. }
  81.  
  82. /* ************************** Defines the main page content area */
  83. #outer{ margin-left:257px;}  /* match width (at least) of fixed sidebar (#left)*/
  84. #inner{padding-top:255px;}      /* matches height of fixed header to clear the content below it*/
  85. #wrapper {padding-left:10px;padding-bottom:50px;width:480px;}
  86. #clear {clear: both;}
  87.  
  88. * html, * html body{overflow:auto;}
  89. * html #outer {overflow:auto}
  90.  
and for problem number 2 its actually only a problem in firefox as the following z-index is not working and the backgroudn is not showing, while its working fine in IE:
Expand|Select|Wrap|Line Numbers
  1. <div id="contents" style="background-image:url('<? echo $this->webroot?>/img/bg04.jpg');background-repeat: no-repeat;z-index:-1;">
i thank anyone who is actually able to read all this code and answer me.
Mar 10 '07 #1
Share this Question
Share on Google+
19 Replies


Expert 100+
P: 1,892
I HATE DIVS AND DIFFERENT BROWSERS!!! i spent the whole day and night searching for a way to center align stupid divs, the problem is that the code is so sensitive, i lost my mind trying to make them work in a certain way (like some should scroll with a fixed background and others shouldn't scroll bla bla..) and the divs are nested and positioned in different ways and if i change something it gets messed up and what works in in IE doesn't work in firefox and vice versa... anyways i managed at the end to get almost what want, now i have 2 main problems:
  1. center all divs together in the center of the page wihtout messing up their positions
  2. be able to dispaly a div with a background that doesnt scroll, and over it should appear another div with text in it that scrolls

for problem 1 here's some code, i dont know if it's not working because of the position (absolute or fixed or relative or whatever):
html code:

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css" media="screen">
  2. body{
  3.     /*background-image:url('<? echo $this->webroot?>/img/bge.jpg');*/
  4. }
  5. #headerinner{
  6.     background-image:url('<? echo $this->webroot?>/img/bg01.jpg');
  7. }
  8. </style>
  9. <!--[if lt IE 7]>
  10. <style>
  11. * html #left1, #left2, #left3, #right, #bottom, #contents {position:absolute;}
  12. * html, * html body{overflow:hidden;height:100%;}
  13. * html #outer {height:100%;overflow:auto}
  14. /* ie only styles below */
  15. /* mac hide \*/
  16.  
  17. * html #headerinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
  18. * html #headerinner{margin-right:17px;}
  19. * html #header{position:absolute;}
  20.  
  21. /* end hide*/
  22.  
  23.  
  24. /* Child Combinator Override Method */
  25. #wrapper {height: 1%;}
  26. #inner>#wrapper {height: auto;}
  27.  
  28. /* Mac-modified Tan Hack Method */
  29. * html #wrapper {height: 1%;} /* for IE/Win */
  30. *>html #wrapper {height: auto;} /* for IE5/Mac */ 
  31. </style>
  32. <![endif]-->
  33. </head>
  34. <body>
  35. <div id="main">
  36.     <div id="header">
  37.         <div id="headerinner">
  38.             <img src="<? echo $this->webroot?>img/spacer.gif" width="800" height="255">
  39.         </div>            <!-- headerinner -->
  40.     </div>                <!-- header -->
  41.     <div id="left1">
  42.         <img src="<? echo $this->webroot?>img/bg03.jpg" width="257" height="97">
  43.     </div>
  44.     <div id="left2">
  45.         <img src="<? echo $this->webroot?>img/bg06e.jpg" width="257" height="181">
  46.     </div>
  47.     <div id="left3">
  48.         <img src="<? echo $this->webroot?>img/bg07.jpg" width="257" height="217">
  49.     </div>
  50.     <!-- End -->
  51.     <!-- Begin name="contents" -->
  52.     <div id="outer">
  53.         <div id="inner">
  54.             <div id="contents" style="background-image:url('<? echo $this->webroot?>/img/bg04.jpg');background-repeat: no-repeat;z-index:-1;">
  55.             </div>
  56.             <div id="wrapper"> 
  57.  
  58.     <?php
  59.                 if ($session->check('Message.flash '))
  60.                 {
  61.                     $session->flash();
  62.                 }
  63.                 echo $content_for_layout;
  64.     ?>
  65.                 <div id="clear"></div>
  66.  
  67.             <!-- End of div: wrapper -->
  68.             </div> 
  69.         <!-- End of div: inner -->
  70.         </div>
  71.     </div>
  72.     <!-- End of div: outer -->
  73.     <div id="right">
  74.         <img src="<? echo $this->webroot?>img/bg05.jpg" width="69" height="495">
  75.     </div>
  76.     <div id="bottom">
  77.         <img src="<? echo $this->webroot?>img/bg08.jpg" width="800" height="50">
  78.     </div>
  79. </div>
  80. <!-- InstanceEndEditable -->
  81.  
  82. </body>
  83. <!-- InstanceEnd --></html>
css code:


Expand|Select|Wrap|Line Numbers
  1. html {padding:0px;margin:0;}
  2.  
  3. /* ***************************** Summary page and detail page generic definitions */
  4. body    {
  5.     padding-top:255px;                    /*match height of fixed header*/
  6.     margin-top:-255px;                    /*match height of fixed header*/
  7.     padding-left:257px;                    /*match width of fixed sidebar*/
  8.     margin-left:-257px;                    /*match width of fixed sidebar*/
  9.     color: #000;
  10.     font-family: Tahoma, Arial, sans-serif;
  11.     font-size: 10pt;
  12.     background-color: #6666CC;
  13.     background-repeat: no-repeat;
  14.     background-attachment: fixed;
  15. }
  16.  
  17. * {padding:0;margin:0;}
  18.  
  19. /* *********************************** Navigation bar on left */
  20. #left1, #left2, #left3 {
  21.     border: none;
  22.     position:fixed;/* for good browers */
  23.     left:0;
  24.     width:257px;
  25.     height: 100%;
  26. }
  27. #left1{top:255px;}
  28. #left2{top:352px;}
  29. #left3{top:533px;}
  30.  
  31. #left1, #left2, #left3 img {    border: none;}
  32.  
  33. #right{
  34.     border: none;
  35.     position:fixed;/* for good browers */
  36.     left:731px;
  37.     top:255px;
  38.     width:69px;
  39.     height:495px;
  40. }
  41.  
  42. #bottom{
  43.     border: none;
  44.     position:fixed;/* for good browers */
  45.     left:0px;
  46.     top:750px;
  47.     width:800px;
  48.     height:50px;
  49. }
  50.  
  51. #contents{
  52.     border: none;
  53.     position:fixed;/* for good browers */
  54.     left:257px;
  55.     top:255px;
  56.     width:474px;
  57.     height:495px;
  58. }
  59.  
  60. * html a:hover {visibility:visible}
  61. /* ************************** Defines the header content */
  62. #header{
  63.     position:fixed;                /* for good browsers*/
  64.     left:0;
  65.     top:0;
  66.     padding:0;
  67.     width:800px;                /* Sets the minimum width of the page */
  68.     height:255px;                     /* the height you want the header to be*/
  69. }
  70.  
  71. #headerinner{                        /* header content goes inside here*/
  72.     height: 255px;                    /* match height of fixed header*/
  73.     position:relative;
  74.     background-repeat: no-repeat;
  75. }
  76.  
  77. #main{
  78.     margin:0px auto;
  79.     border:10px solid red;
  80. }
  81.  
  82. /* ************************** Defines the main page content area */
  83. #outer{ margin-left:257px;}  /* match width (at least) of fixed sidebar (#left)*/
  84. #inner{padding-top:255px;}      /* matches height of fixed header to clear the content below it*/
  85. #wrapper {padding-left:10px;padding-bottom:50px;width:480px;}
  86. #clear {clear: both;}
  87.  
  88. * html, * html body{overflow:auto;}
  89. * html #outer {overflow:auto}
  90.  
and for problem number 2 its actually only a problem in firefox as the following z-index is not working and the backgroudn is not showing, while its working fine in IE:
Expand|Select|Wrap|Line Numbers
  1. <div id="contents" style="background-image:url('<? echo $this->webroot?>/img/bg04.jpg');background-repeat: no-repeat;z-index:-1;">
i thank anyone who is actually able to read all this code and answer me.
Ok lets say #main is the 'wrapper' for the page add text-align: center not really sure about your second question post the code. If need be add another div around the whole. An example below:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Layout Test</title>
<style type="text/css">
#clsWrapper
{
margin-left: auto;
margin-right: auto;
width: 600px;
height: 800px;
border: 1px solid black;
}



</style>


</script>
</head>

<body>
<div id="clsWrapper">
Hello World!!!!!!!!!
</div>
</body>
</html>
[/html]
Mar 10 '07 #2

ronverdonk
Expert 2.5K+
P: 4,258
What does any god have to do with your problem??

Ronald :cool:
Mar 10 '07 #3

roula
P: 18
thanks for your reply, i already tried many align-center but it's only aligning the text to the center while the divs are still sticking to the left side. as for the second part of the question, i just 2 divs on top of each others, the bottom one will have a fixed background that does not scroll, and the one above have the text that will scroll. this is actually working in IE when i set z-index=-1 like u see in my code, but it's not working in firefox.

Thank you :)
Mar 10 '07 #4

roula
P: 18
What does any god have to do with your problem??

Ronald :cool:
it's an expression DUH
Mar 10 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
Just got back into town so I haven't looked at your code. The way to center align divs is to apply 'margin:0 auto' to the css for the parent div.

Let me know if that does it for you. If not, I'll look deeper into your markup.
Mar 10 '07 #6

Banfa
Expert Mod 5K+
P: 8,916
In future please keep unnecessary religious references out of your thread titles.
Mar 10 '07 #7

Banfa
Expert Mod 5K+
P: 8,916
Just got back into town so I haven't looked at your code. The way to center align divs is to apply 'margin:0 auto' to the css for the parent div.

Let me know if that does it for you. If not, I'll look deeper into your markup.
I don't think you mean parent div do you?

Also it is important that the div is given a width as the default with is 100% of the parents width resulting in no visible centring effect.
Mar 10 '07 #8

Expert 100+
P: 1,892
thanks for your reply, i already tried many align-center but it's only aligning the text to the center while the divs are still sticking to the left side. as for the second part of the question, i just 2 divs on top of each others, the bottom one will have a fixed background that does not scroll, and the one above have the text that will scroll. this is actually working in IE when i set z-index=-1 like u see in my code, but it's not working in firefox.

Thank you :)
You didn't look at my example on how to center read Doc's post above same general syntax.
Mar 10 '07 #9

roula
P: 18
Just got back into town so I haven't looked at your code. The way to center align divs is to apply 'margin:0 auto' to the css for the parent div.

Let me know if that does it for you. If not, I'll look deeper into your markup.
Hi and thanks,

the 'margin:0 auto' is not working, or maybe I'm not using it right or not on the correct div. I also can't put a limit on the width of some divs because I am hiding the default scroll bar and replacing it with a scroll bar of div.

I am not much familiar with divs, but I'm learning now.

Here is my code in simple steps with some comments:

I added this div (main) to wrap all other divs in it, with the styles related:
Expand|Select|Wrap|Line Numbers
  1. <div id="main">
  2. (all other divs in here)
  3. </div>
  4.  
  5. #main{
  6.     margin:0px auto;
  7.     text-align:center; (I removed this because it's aligning the text only)
  8.     }
  9.  
Then there is this div which contains the header image, and the divs that have the ids "left1" "left2" and "left3" are just divs that go along the left side with images that compose the left navigation.
Expand|Select|Wrap|Line Numbers
  1. <div id="header">
  2.         <div id="headerinner">
  3.             <img src="img/spacer.gif" width="800" height="255" align="center">
  4.         </div>            <!-- headerinner -->
  5.     </div>                <!-- header -->
  6.     <div id="left1">
  7.         <img src="img/bg03.jpg" width="257" height="97">
  8.     </div>
  9.     <div id="left2">
  10.         <img src="img/bg06e.jpg" width="257" height="181">
  11.     </div>
  12.     <div id="left3">
  13.         <img src="img/bg07.jpg" width="257" height="217">
  14.     </div>
  15.  
  16. #header{
  17.     position:fixed;                /* for good browsers*/
  18.     left:0;
  19.     top:0;
  20.     padding:0;
  21.     width:800px;                /* Sets the minimum width of the page */
  22.     height:255px;                     /* the height you want the header to be*/
  23. }
  24.  
  25. #headerinner{                        /* header content goes inside here*/
  26.     height: 255px;                    /* match height of fixed header*/
  27.     position:relative;
  28. background-image:url('/img/bg01.jpg');
  29.     background-repeat: no-repeat;
  30.  
and i have those style for IE
Expand|Select|Wrap|Line Numbers
  1. <!--[if lt IE 7]>
  2. <style>
  3. * html #left1, #left2, #left3, #right, #bottom, #contents {position:absolute;}
  4. * html, * html body{overflow:hidden;height:100%;}
  5. * html #outer {height:100%;overflow:auto}
  6. /* ie only styles below */
  7. /* mac hide \*/
  8.  
  9. * html #headerinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
  10. * html #headerinner{margin-right:17px;}
  11. * html #header{position:absolute;}
  12.  
  13. /* end hide*/
  14.  
  15.  
  16. /* Child Combinator Override Method */
  17. #wrapper {height: 1%;}
  18. #inner>#wrapper {height: auto;}
  19.  
  20. /* Mac-modified Tan Hack Method */
  21. * html #wrapper {height: 1%;} /* for IE/Win */
  22. *>html #wrapper {height: auto;} /* for IE5/Mac */ 
  23. </style>
  24. <![endif]-->
and then here comes where the contents should be, where the content should scroll but the other divs will remain in place to keep the design with it.
Expand|Select|Wrap|Line Numbers
  1. <div id="outer" style="border:5px solid green;">
  2.         <div id="inner" style="border:10px solid blue;">
  3.             <div id="contents" style="background-image:url('<? echo $this->webroot?>/img/bg04.jpg');background-repeat: no-repeat;">
  4.             </div>
  5.             <div id="wrapper" style="border:1px solid red;">
  6.  
  7. #outer{ margin-left:257px;}  /* match width (at least) of fixed sidebar (#left)*/
  8. #inner{padding-top:255px;margin:0 auto;}      /* matches height of fixed header to clear the content below it*/
  9. #wrapper {padding-left:10px;padding-bottom:50px;width:480px;}
  10. #clear {clear: both;}
  11.  
  12. * html, * html body{overflow:auto;}
  13. * html #outer {overflow:auto}
  14.  
the complete code is in my original post, and here is a print screen of the website:

Mar 11 '07 #10

drhowarddrfine
Expert 5K+
P: 7,435
It's hard to debug code that has server directives and server side code sprinkled throughout. A link would be better or the html only markup.

In any case, one thing that has to be remembered is that absolute positioning removes that element from the normal flow so it has no affect on other elements and they have no effect on it.

I said to add the margin thing to the parent div and, yes, I did not mean 'parent' div. So, to get this to work, you would set a width to the div you want to center. Then apply margin:0 auto to that div also. Like this:

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. #center{
  3. width:300px;
  4. height:300px;
  5. background-color:blue;
  6. margin:0 auto;
  7. }
  8. </style>
  9. <div id="center">
  10. Some stuff in here
  11. </div>
  12.  
But, like I said, if the div or any of its contents are positioned absolutely, this won't work.
Mar 11 '07 #11

Expert 100+
P: 1,892
Hi and thanks,

the 'margin:0 auto' is not working, or maybe I'm not using it right or not on the correct div. I also can't put a limit on the width of some divs because I am hiding the default scroll bar and replacing it with a scroll bar of div.

I am not much familiar with divs, but I'm learning now.

Here is my code in simple steps with some comments:

I added this div (main) to wrap all other divs in it, with the styles related:
Expand|Select|Wrap|Line Numbers
  1. <div id="main">
  2. (all other divs in here)
  3. </div>
  4.  
  5. #main{
  6.     margin:0px auto;
  7.     text-align:center; (I removed this because it's aligning the text only)
  8.     }
  9.  
Then there is this div which contains the header image, and the divs that have the ids "left1" "left2" and "left3" are just divs that go along the left side with images that compose the left navigation.
Expand|Select|Wrap|Line Numbers
  1. <div id="header">
  2.         <div id="headerinner">
  3.             <img src="img/spacer.gif" width="800" height="255" align="center">
  4.         </div>            <!-- headerinner -->
  5.     </div>                <!-- header -->
  6.     <div id="left1">
  7.         <img src="img/bg03.jpg" width="257" height="97">
  8.     </div>
  9.     <div id="left2">
  10.         <img src="img/bg06e.jpg" width="257" height="181">
  11.     </div>
  12.     <div id="left3">
  13.         <img src="img/bg07.jpg" width="257" height="217">
  14.     </div>
  15.  
  16. #header{
  17.     position:fixed;                /* for good browsers*/
  18.     left:0;
  19.     top:0;
  20.     padding:0;
  21.     width:800px;                /* Sets the minimum width of the page */
  22.     height:255px;                     /* the height you want the header to be*/
  23. }
  24.  
  25. #headerinner{                        /* header content goes inside here*/
  26.     height: 255px;                    /* match height of fixed header*/
  27.     position:relative;
  28. background-image:url('/img/bg01.jpg');
  29.     background-repeat: no-repeat;
  30.  
and i have those style for IE
Expand|Select|Wrap|Line Numbers
  1. <!--[if lt IE 7]>
  2. <style>
  3. * html #left1, #left2, #left3, #right, #bottom, #contents {position:absolute;}
  4. * html, * html body{overflow:hidden;height:100%;}
  5. * html #outer {height:100%;overflow:auto}
  6. /* ie only styles below */
  7. /* mac hide \*/
  8.  
  9. * html #headerinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
  10. * html #headerinner{margin-right:17px;}
  11. * html #header{position:absolute;}
  12.  
  13. /* end hide*/
  14.  
  15.  
  16. /* Child Combinator Override Method */
  17. #wrapper {height: 1%;}
  18. #inner>#wrapper {height: auto;}
  19.  
  20. /* Mac-modified Tan Hack Method */
  21. * html #wrapper {height: 1%;} /* for IE/Win */
  22. *>html #wrapper {height: auto;} /* for IE5/Mac */ 
  23. </style>
  24. <![endif]-->
and then here comes where the contents should be, where the content should scroll but the other divs will remain in place to keep the design with it.
Expand|Select|Wrap|Line Numbers
  1. <div id="outer" style="border:5px solid green;">
  2.         <div id="inner" style="border:10px solid blue;">
  3.             <div id="contents" style="background-image:url('<? echo $this->webroot?>/img/bg04.jpg');background-repeat: no-repeat;">
  4.             </div>
  5.             <div id="wrapper" style="border:1px solid red;">
  6.  
  7. #outer{ margin-left:257px;}  /* match width (at least) of fixed sidebar (#left)*/
  8. #inner{padding-top:255px;margin:0 auto;}      /* matches height of fixed header to clear the content below it*/
  9. #wrapper {padding-left:10px;padding-bottom:50px;width:480px;}
  10. #clear {clear: both;}
  11.  
  12. * html, * html body{overflow:auto;}
  13. * html #outer {overflow:auto}
  14.  
the complete code is in my original post, and here is a print screen of the website:

Ok really you didn't look at my example code on how to center something. Here you go:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Layout Test</title>
<style type="text/css">
#clsWrapper
{
margin-left: auto;
margin-right: auto;
width: 600px;
height: 800px;
border: 1px solid black;
}



</style>


</script>
</head>

<body>
<div id="clsWrapper">
Hello World!!!!!!!!!
</div>
</body>
</html>
[/html]
Mar 12 '07 #12

roula
P: 18
Ok really you didn't look at my example code on how to center something. Here you go:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Layout Test</title>
<style type="text/css">
#clsWrapper
{
margin-left: auto;
margin-right: auto;
width: 600px;
height: 800px;
border: 1px solid black;
}



</style>


</script>
</head>

<body>
<div id="clsWrapper">
Hello World!!!!!!!!!
</div>
</body>
</html>
[/html]

hehe i really looked :)
sorry for not replying earlier.
anyways my code was too complicated because i copied it from somewhere else without really understanding and then i was trying to add my requirements and finish it on time, but it got all messed up.

i tried your exapmle but it didnt work in my case, or maybe i didnt know how to apply it correctly.

now i found another way much more simple, and i was able to center align the required divs using all your advices.

i really thank everyone who replied to my question regarding divs.

as for the admins, they only wasted my time by making a big issue of my post subject (which they took the liberty to modify) and they gave me fake hope by replying to my css question with something totally not related. anyways, ur site, ur rules. I just wonder how you pretend to be a "free" and "democratic" country while someone is not free to post whatever they want hehe. i hope no one's feelings were "hurt" because of my REALLY BAD SENSITIVE subject!!!!!!!!!!!!!!!!!! thats so silly lol. feel free to delete this paragraph after you read it, or maybe u would like to delete my whole account :) (and how old r u btw?!)
Mar 12 '07 #13

drhowarddrfine
Expert 5K+
P: 7,435
In our country, you are free to say whatever you want, but if you want to say it in someone else's space and they don't want you to, they are free to edit/delete it as they wish. As you said, our site, our rules but I'm sure it was edited for politeness and to be appropriate in case some may be offended in its use.
Mar 12 '07 #14

Expert 100+
P: 1,892
hehe i really looked :)
sorry for not replying earlier.
anyways my code was too complicated because i copied it from somewhere else without really understanding and then i was trying to add my requirements and finish it on time, but it got all messed up.

i tried your exapmle but it didnt work in my case, or maybe i didnt know how to apply it correctly.

now i found another way much more simple, and i was able to center align the required divs using all your advices.

i really thank everyone who replied to my question regarding divs.

as for the admins, they only wasted my time by making a big issue of my post subject (which they took the liberty to modify) and they gave me fake hope by replying to my css question with something totally not related. anyways, ur site, ur rules. I just wonder how you pretend to be a "free" and "democratic" country while someone is not free to post whatever they want hehe. i hope no one's feelings were "hurt" because of my REALLY BAD SENSITIVE subject!!!!!!!!!!!!!!!!!! thats so silly lol. feel free to delete this paragraph after you read it, or maybe u would like to delete my whole account :) (and how old r u btw?!)
I don't think you're getting the point from my example put a div around everything you want centered and then apply margin-left: auto;margin-right: auto to center. If you post a simplified version of your code I will show you (minus all the server stuff). I didn't notice the title of thread and yes our Admins changed it. This is not a place to talk about God it's a place to talk about coding.
Mar 12 '07 #15

Expert 100+
P: 1,892
as for the admins, they only wasted my time by making a big issue of my post subject (which they took the liberty to modify) and they gave me fake hope by replying to my css question with something totally not related. anyways, ur site, ur rules. I just wonder how you pretend to be a "free" and "democratic" country while someone is not free to post whatever they want hehe. i hope no one's feelings were "hurt" because of my REALLY BAD SENSITIVE subject!!!!!!!!!!!!!!!!!! thats so silly lol. feel free to delete this paragraph after you read it, or maybe u would like to delete my whole account :) (and how old r u btw?!)
Ok, here we go now this is upsetting me. I'm 26 years old not that it is any of your business. For 5 years I served in the United States Marine Corps, you are one to talk about freedom and democracy. After looking at your signature I'm gathering you're from Syria. Lets not forget your country is known to fund/hide terrorism/terrorists and also repeatedly attempts to attack my countries Embassy. You didn't hurt my feelings about God, but there is no need for this kind of response I showed you an example of how to center something and you obviously didn't pay attention. If you want to talk coding great we can do that here if you want to talk politics do it somewhere else.

Aric
Mar 12 '07 #16

MMcCarthy
Expert Mod 10K+
P: 14,534
Expand|Select|Wrap|Line Numbers
  1. as for the admins, they only wasted my time by making a big issue of my post subject (which they took the liberty to modify) and they gave me fake hope by replying to my css question with something totally not related. anyways, ur site, ur rules. I just wonder how you pretend to be a "free" and "democratic" country while someone is not free to post whatever they want hehe. i hope no one's feelings were "hurt" because of my REALLY BAD SENSITIVE subject!!!!!!!!!!!!!!!!!! thats so silly lol. feel free to delete this paragraph after you read it, or maybe u would like to delete my whole account :) (and how old r u btw?!)
There is a reason for modifying the title of a thread and it is also clearly laid out in the FAQ how threads are to be posted.

However, l feel that it is more important to point out that rude or disrespectful behaviour will not be tolerated on this site. This site has members from all corners of the world and they come from various backgrounds and ethnicity. We all manage to get along quite well because we deal with each other in a respectful and professional manner and any other attitude will not be tolerated. If you wish to behave like this then I suggest you find another forum to assist you.

The experts were donating their free time to try to help you solve your difficulty and the proper response to not understanding their help is to ask for clarification and not to insult them.

ADMIN
Mar 12 '07 #17

roula
P: 18
Expand|Select|Wrap|Line Numbers
  1. as for the admins, they only wasted my time by making a big issue of my post subject (which they took the liberty to modify) and they gave me fake hope by replying to my css question with something totally not related. anyways, ur site, ur rules. I just wonder how you pretend to be a "free" and "democratic" country while someone is not free to post whatever they want hehe. i hope no one's feelings were "hurt" because of my REALLY BAD SENSITIVE subject!!!!!!!!!!!!!!!!!! thats so silly lol. feel free to delete this paragraph after you read it, or maybe u would like to delete my whole account :) (and how old r u btw?!)
There is a reason for modifying the title of a thread and it is also clearly laid out in the FAQ how threads are to be posted.

However, l feel that it is more important to point out that rude or disrespectful behaviour will not be tolerated on this site. This site has members from all corners of the world and they come from various backgrounds and ethnicity. We all manage to get along quite well because we deal with each other in a respectful and professional manner and any other attitude will not be tolerated. If you wish to behave like this then I suggest you find another forum to assist you.

The experts were donating their free time to try to help you solve your difficulty and the proper response to not understanding their help is to ask for clarification and not to insult them.

ADMIN
i didn't insult anyone who is trying to help me, i actually thanked them all.
Mar 12 '07 #18

MMcCarthy
Expert Mod 10K+
P: 14,534
i didn't insult anyone who is trying to help me, i actually thanked them all.
For most people insulting their country is considered an insult by them. Just avoid making these kind of remarks.
Mar 12 '07 #19

Expert 100+
P: 1,892
Closing this thread if you still can't center something please repost your question.
Mar 12 '07 #20

This discussion thread is closed

Replies have been disabled for this discussion.