Centering DIVs inside CSS

Question

nigelburrell 0 Light Poster

15 Years Ago

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

.DIV1 {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   height: 70px;
}

.DIV2 {
   float: left;
   text-align: center;
   width: 80px;
}

HTML

<div class='DIV1'>
<div class='DIV2'>Content 1</div>
<div class='DIV2'>Content 2</div>
<div class='DIV2'>Content 3</div>
</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

html-css web-design

3 Contributors
11 Replies
485 Views
1 Week Discussion Span
Latest Post 15 Years Ago Latest Post by Troy III

Troy III 272 Posting Pro

15 Years Ago

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;
}

nigelburrell commented: Excellent solution +1

Troy III 272 Posting Pro

15 Years Ago

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>

Airshow 416 WiFi Lounge Lizard

15 Years Ago

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:

.DIV1 {
   width: 100%;/* or whatever */
   height: 70px;/* or whatever */
}

.DIV2 {
   position : relative;
   left : 50%; 
   width: 80px;
   margin-left : -40px;
}

Just make sure that margin-left is neg 0.5 of the width.

Airshow

nigelburrell commented: Thanks for your help +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

nigelburrell 0 Light Poster · Answer 1 · 2009-08-14T08:16:02+00:00

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?

nigelburrell 0 Light Poster · Answer 2 · 2009-08-14T08:29:49+00:00

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.

Troy III 272 Posting Pro · Answer 3 · 2009-08-14T11:18:53+00:00

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.

Troy III 272 Posting Pro · Answer 4 · 2009-08-14T14:01:44+00:00

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)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>center elements</title>

<style type="text/css">
      #centered{
            margin: auto;
            width: 90%;
            padding: 3px;
            background: gray;
            text-align: center;
            vertical-align: middle;
      }

      div span { 
            display: inline-block;
            background: #fff;
            margin: 1px;
            padding: 2px;
            font: normal 10pt tahoma;
            padding-left: 10px;
            
      }
      span b {
            position: relative;
            display: inline-block;
            width: 2em; 
            background:gray; 
            color:white
      }
      
      span span {
            width:160px;
            background: silver;
            display: inline-block;
            padding: 0 10px 0 10px;
            text-align: left;
            margin: 2px;
      }
</style>

</head>

<body>

<div id="centered">
<span>
<b>A</b>
<span>1 This is centered</span>
<span>2 This is centered</span>
<span>3 This is centered</span>
</span>
<br>
<span>
<b>B</b>
<span>1 This is centered</span>
<span>2 This is centered</span>
<span>3 This is centered</span>
</span>
<br>
<span>
<b>C</b>
<span>1 This is centered</span>
<span>2 This is centered</span>
<span>3 This is centered</span>
</span>
<br>
<span>
<b>D</b>
<span>1 This is centered</span>
<span>2 This is centered</span>
<span>3 This is centered</span>
</span>
<br>
<span>
<b>E</b>
<span>1 This is centered</span>
<span>2 This is centered</span>
<span>3 This is centered</span>
</span>
<br>
<span>
<b>F</b>
<span>1 This is centered</span>
<span>2 This is centered</span>
<span>3 This is centered</span>
</span>
<br>
<span>
<b>G</b>
<span>1 This is centered</span>
<span>2 This is centered</span>
<span>3 This is centered</span>
</span>
<br>
<span>
<b>H</b>
<span>1 This is centered</span>
<span>2 This is centered</span>
<span>3 This is centered</span>
</span>
<br>
<span>
<b>I</b>
<span>1 This is centered</span>
<span>2 This is centered</span>
<span>3 This is centered</span>
</span>
<br>
<span>
<b>J</b>
<span>1 This is centered</span>
<span>2 This is centered</span>
<span>3 This is centered</span>
</span>
</div>

</body>
</html>

After all - not bad at all!

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 5 · 2009-08-14T17:41:54+00:00

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.

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 :icon_twisted: ).

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

nigelburrell 0 Light Poster · Answer 6 · 2009-08-14T20:19:46+00:00

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.

nigelburrell 0 Light Poster · Answer 7 · 2009-08-14T20:27:27+00:00

Thanks Airshow.... your comments are very useful. I agree, transitional effects are not necessarily a bad thing on some occasions (it kind of looks cool sometimes) but for me I'm using a centering div for populating lots of small menu icons with text descriptions so it doesn't make sense to have them 'jumping' around the screen to position themselves during page loads, which is even more obvious on slower PCs and/or slow internet connections.

Troy III 272 Posting Pro · Answer 8 · 2009-08-22T22:03:39+00:00

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.

You're welcome.
And sorry for asking but did it solve your problem?