HTML and CSS RSS HTML and CSS RSS

Centering DIVs inside CSS

Reply
1 2

•
•
Join Date: Jun 2009
Posts: 38
Reputation: nigelburrell is an unknown quantity at this point 
Solved Threads: 0
nigelburrell nigelburrell is offline Offline
Light Poster

Centering DIVs inside CSS

 
0
  #1
Aug 13th, 2009
I'm trying to use DIVs contained within a DIV to show content which is centered horizontally on the page, as per this example.

+=========== DIV 1 ===========+
+------+=====+=====+=====+-------+
+------+ DIV 2 + DIV 2 + DIV 2 +--------+
+------+=====+=====+=====+-------+
+==========================+

Here's the CSS and HTML code I'm using:

CSS
HTML and CSS Syntax (Toggle Plain Text) 
  1. .DIV1 {
  2.    width: 100%;
  3.    margin-left: auto;
  4.    margin-right: auto;
  5.    height: 70px;
  6. }
  7.  
  8. .DIV2 {
  9.    float: left;
  10.    text-align: center;
  11.    width: 80px;
  12. }

HTML
HTML and CSS Syntax (Toggle Plain Text) 
  1. <div class='DIV1'>
  2. <div class='DIV2'>Content 1</div>
  3. <div class='DIV2'>Content 2</div>
  4. <div class='DIV2'>Content 3</div>
  5. </div>

I've learnt that by setting margin-left and margin-right to 'auto' in DIV1 the content inside is centered, but only if it contains one DIV2 inside it.

When I add more DIV2s then the content inside DIV1 now shows on the left and ignores any centering...

+=========== DIV 1 ===========+
+=====+=====+=====+---------------+
+ DIV 2 + DIV 2 + DIV 2 +----------------+
+=====+=====+=====+---------------+
+==========================+

Does anyone please know why this is happening, and how I can fix it?

Thanks
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Centering DIVs inside CSS

 
1
  #2
Aug 13th, 2009
that's because you are doing it the wrong way, -it is the div2 who should have its margins set to auto and there should be no float.
-Here, try this:
.DIV1 {
   width: 100%;
   height: 70px;
}

.DIV2 {
   margin: auto ;
   display: inline;
   text-align: center;
   width: 80px;
}
Last edited by Troy III; Aug 13th, 2009 at 8:57 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Centering DIVs inside CSS

 
0
  #3
Aug 13th, 2009
sorry that will not do, either!
This proves to be more stubborn than expected...
You should use spans, instead of divs if you want them lined in the ceter of the container div and apply display property of inlilne-block
as in this example, since IE will not override DIVs native block property with css command but will add it to the span element.

Here's a working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
    <head>
<style type="text/css">
      #centered{
            margin: auto;
            width: 80%;
            padding: 5px;
            background: #eee;
            text-align: center;
            border: solid 1px #777;
      }
      .center{
            width:160px;
            background: silver;
            display: inline-block;
            padding: 0px 10px 0px 10px;
            text-align: left;
            border: solid 1px #777;
      }
</style>
    </head>
<body>
<div id="centered">
<span class='center'>1 This is centered</span>
<span class='center'>2 This is centered</span>
<span class='center'>3 This is centered</span>
</div>

</body>
</html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 864
Reputation: Airshow is on a distinguished road 
Solved Threads: 122
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: Centering DIVs inside CSS

 
1
  #4
Aug 13th, 2009
I recall all sorts of issues with inline divs. Can't remember the detail.

The only CSS I know that works cross browser, as already posted on Daniweb several times, is:

css Syntax (Toggle Plain Text) 
  1. .DIV1 {
  2.    width: 100%;/* or whatever */
  3.    height: 70px;/* or whatever */
  4. }
  5.  
  6. .DIV2 {
  7.    position : relative;
  8.    left : 50%; 
  9.    width: 80px;
  10.    margin-left : -40px;
  11. }
Just make sure that margin-left is neg 0.5 of the width.

Airshow
Last edited by peter_budo; Aug 14th, 2009 at 12:49 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 38
Reputation: nigelburrell is an unknown quantity at this point 
Solved Threads: 0
nigelburrell nigelburrell is offline Offline
Light Poster

Re: Centering DIVs inside CSS

 
0
  #5
Aug 13th, 2009
Thanks Troy III... your solution works well!!

It's funny, but it's seems a bit strange to me why DIVs are so problematic in these situations. In moments like this I'm tempted to resort back to HTML tables, and that's saying something... the very thing DIVs are meant to replace.

But thanks for replying and providing a solution... I've tried it in my code, and it does the job perfectly!

By the way, are you aware of any issues with inline divs that Airshow refers to in his post?
Last edited by nigelburrell; Aug 13th, 2009 at 11:18 pm. Reason: To add more content that I forgot to include
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 38
Reputation: nigelburrell is an unknown quantity at this point 
Solved Threads: 0
nigelburrell nigelburrell is offline Offline
Light Poster

Re: Centering DIVs inside CSS

 
0
  #6
Aug 13th, 2009
Thanks Airshow for your post and solution.

I tried your code and it works to a certain extend, but instead of centering the content perfectly, it appears with a slight right offset beyond 50% across the page, but that's minor as I only had to adjust the 100% width in DIV1 to 80% instead. And another thing is that each DIV2 block re-positions itself as the page loads which looks a little strange and rather cumbersome, especially if I have a large numer of DIV2s appearing on the page.

In the end, I went with Troy III's solution simply because the DIV2 content appears instantly (without re-positioning during page loads), but I am curious about your comment that you know of some issues with inline divs...? Is this a cross-browser thing?

Thanks again for your code, I really appreciate your help.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Centering DIVs inside CSS

 
0
  #7
Aug 14th, 2009
•
•
•
•
Originally Posted by nigelburrell View Post
Thanks Troy III... your solution works well!!

It's funny, but it's seems a bit strange to me why DIVs are so problematic in these situations. In moments like this I'm tempted to resort back to HTML tables, and that's saying something... the very thing DIVs are meant to replace.

But thanks for replying and providing a solution... I've tried it in my code, and it does the job perfectly!

By the way, are you aware of any issues with inline divs that Airshow refers to in his post?
Tables should be used fort tabular data only.

Divs are block-level, do-nothing containers, and since this is the main purpose of their existence;
If you remove that property its no longer a DIV, it would become a simple inline element and will break the HTML semantics and/or shouldn't be capable of holding other block-level elements anymore.

So instead of making e block-level element behave like inline element, it is better to use a true inline element instead. Other coders are using ready inline-block elements like <li> but that will again break the HTML semantcs and should not be missused also.

So, again the best solution that remains for this type of positioning is using an inline element and add to it, an inline-block display property.

Yes, the soultion I suggested would have to be cross-browser, and since I allready mentioned, css instruction inline-block will not override the native line-break property of the div element in explorer.

Regards.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Centering DIVs inside CSS

 
0
  #8
Aug 14th, 2009
When you say:
•
•
•
•
"I'm tempted to resort back to HTML tables"
and before you do that, - I envite you to see this:

http://i25.tinypic.com/23hwphk.png [sorry I dont see how I could link to an image here!] (That's how it will look on IE 6)

HTML and CSS Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <title>center elements</title>
  6.  
  7. <style type="text/css">
  8.       #centered{
  9.             margin: auto;
  10.             width: 90%;
  11.             padding: 3px;
  12.             background: gray;
  13.             text-align: center;
  14.             vertical-align: middle;
  15.       }
  16.  
  17.       div span { 
  18.             display: inline-block;
  19.             background: #fff;
  20.             margin: 1px;
  21.             padding: 2px;
  22.             font: normal 10pt tahoma;
  23.             padding-left: 10px;
  24.  
  25.       }
  26.       span b {
  27.             position: relative;
  28.             display: inline-block;
  29.             width: 2em; 
  30.             background:gray; 
  31.             color:white
  32.       }
  33.  
  34.       span span {
  35.             width:160px;
  36.             background: silver;
  37.             display: inline-block;
  38.             padding: 0 10px 0 10px;
  39.             text-align: left;
  40.             margin: 2px;
  41.       }
  42. </style>
  43.  
  44. </head>
  45.  
  46. <body>
  47.  
  48. <div id="centered">
  49. <span>
  50. <b>A</b>
  51. <span>1 This is centered</span>
  52. <span>2 This is centered</span>
  53. <span>3 This is centered</span>
  54. </span>
  55. <br>
  56. <span>
  57. <b>B</b>
  58. <span>1 This is centered</span>
  59. <span>2 This is centered</span>
  60. <span>3 This is centered</span>
  61. </span>
  62. <br>
  63. <span>
  64. <b>C</b>
  65. <span>1 This is centered</span>
  66. <span>2 This is centered</span>
  67. <span>3 This is centered</span>
  68. </span>
  69. <br>
  70. <span>
  71. <b>D</b>
  72. <span>1 This is centered</span>
  73. <span>2 This is centered</span>
  74. <span>3 This is centered</span>
  75. </span>
  76. <br>
  77. <span>
  78. <b>E</b>
  79. <span>1 This is centered</span>
  80. <span>2 This is centered</span>
  81. <span>3 This is centered</span>
  82. </span>
  83. <br>
  84. <span>
  85. <b>F</b>
  86. <span>1 This is centered</span>
  87. <span>2 This is centered</span>
  88. <span>3 This is centered</span>
  89. </span>
  90. <br>
  91. <span>
  92. <b>G</b>
  93. <span>1 This is centered</span>
  94. <span>2 This is centered</span>
  95. <span>3 This is centered</span>
  96. </span>
  97. <br>
  98. <span>
  99. <b>H</b>
  100. <span>1 This is centered</span>
  101. <span>2 This is centered</span>
  102. <span>3 This is centered</span>
  103. </span>
  104. <br>
  105. <span>
  106. <b>I</b>
  107. <span>1 This is centered</span>
  108. <span>2 This is centered</span>
  109. <span>3 This is centered</span>
  110. </span>
  111. <br>
  112. <span>
  113. <b>J</b>
  114. <span>1 This is centered</span>
  115. <span>2 This is centered</span>
  116. <span>3 This is centered</span>
  117. </span>
  118. </div>
  119.  
  120. </body>
  121. </html>

After all - not bad at all!
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 864
Reputation: Airshow is on a distinguished road 
Solved Threads: 122
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: Centering DIVs inside CSS

 
0
  #9
Aug 14th, 2009
•
•
•
•
Originally Posted by nigelburrell View Post
I tried your code and it works to a certain extend, but instead of centering the content perfectly, it appears with a slight right offset beyond 50% across the page, but that's minor as I only had to adjust the 100% width in DIV1 to 80% instead.
I can only think that's caused by overflow - ie. content flowing outside the div's width (or in IE pushing the div wider than its CSS says). Might be something else but I don't know what it might be.

•
•
•
•
Originally Posted by nigelburrell View Post
And another thing is that each DIV2 block re-positions itself as the page loads which looks a little strange and rather cumbersome, especially if I have a large numer of DIV2s appearing on the page.
Must say I've never noticed this effect. Personally I'd live with it - many pages have transitional effects as they load .... (a certain Daniweb comes to mind ).

•
•
•
•
Originally Posted by nigelburrell View Post
In the end, I went with Troy III's solution simply because the DIV2 content appears instantly (without re-positioning during page loads), but I am curious about your comment that you know of some issues with inline divs...? Is this a cross-browser thing?
I seem to recall that I tried inline/inline-block once for some reason and had all sorts of cross-browser problems. The effect wasn't reliable. I read a few discussions on the web which were enough to confirm it was not the right thing to be using. That said, I'm pretty certain I wasn't trying to make a centred div - so if TIII's method works (cross-browser) and doesn't jump around while loading then run with it.

Airshow
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 38
Reputation: nigelburrell is an unknown quantity at this point 
Solved Threads: 0
nigelburrell nigelburrell is offline Offline
Light Poster

Re: Centering DIVs inside CSS

 
0
  #10
Aug 14th, 2009
Thanks again Troy III, I really appreciate your thoughts regarding inline divs etc. You've given me much to ponder about with the rest of my website design. Have a good day.
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC