473,320 Members | 1,988 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

How do i center align divs

roula
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
19 6160
AricC
1,892 Expert 1GB
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
4,258 Expert 4TB
What does any god have to do with your problem??

Ronald :cool:
Mar 10 '07 #3
roula
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
18
What does any god have to do with your problem??

Ronald :cool:
it's an expression DUH
Mar 10 '07 #5
drhowarddrfine
7,435 Expert 4TB
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
9,065 Expert Mod 8TB
In future please keep unnecessary religious references out of your thread titles.
Mar 10 '07 #7
Banfa
9,065 Expert Mod 8TB
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
AricC
1,892 Expert 1GB
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
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
7,435 Expert 4TB
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
AricC
1,892 Expert 1GB
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
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
7,435 Expert 4TB
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
AricC
1,892 Expert 1GB
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
AricC
1,892 Expert 1GB
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
14,534 Expert Mod 8TB
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
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
14,534 Expert Mod 8TB
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
AricC
1,892 Expert 1GB
Closing this thread if you still can't center something please repost your question.
Mar 12 '07 #20

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: BenOne© | last post by:
Hi all, I'm trying to create an image gallery with CSS but I can't get the thumbnails to center horizontally as a group. The page, including css defined in the <HEAD> is located at:...
4
by: Philipp Lenssen | last post by:
Is it possible in IE6+NS7 to center-align a div of fixed width which itself contains elements which use "position: absolute"? Using "margin-left: auto" and "margin-right: auto" works well to center...
2
by: joey.powell | last post by:
Make Firefox Center Content in a div Or td Tag By Using CSS? Does anyone know how to do this. IE works great with text-align:center; but Firefox just always left-aligns...
0
by: McGeeky | last post by:
Hi. I am using DIVs for lay outs rather than tables but cannot resolve a catch 22. I need to use the float: left so that I can get DIVs to line up in rows however, float : left does not respect the...
0
by: Dessip | last post by:
Hey, The code that follows im having problems with, i think tis the CSS, but i dont have a clue of fixing it, i have tried any things but without the float:Left there is no point the folloing...
1
by: judacris | last post by:
I've seen the threads here about molding 2 divs in a centered fashion. but I can't seem to solve this thing. my blogger blog is functioning well on my site for now, but the blog feed (left) and...
2
by: David | last post by:
I'm trying to style a kind of minimalist welcome page where each of X number of (gray?) boxes will be links to a part of the site. I want to implement the navbar (ie, set of boxes linking to...
13
by: Stevo | last post by:
I've found that for IE6+, if you add the property text-align:center to a DIV, then *anything* inside it gets centered. That can be a table, an object/embed, another DIV, an image, or some text. ...
0
by: nlindsay | last post by:
I am trying to center align 2 left floated divs within a % width background. I know that setting the wrapper div to a fixed width works, but can it be done with a fluid background? (basically I...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.