473,320 Members | 1,922 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.

Centered div of indeterminate size

If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?

Brian Tozer
Jul 20 '05 #1
27 3008
"KiwiBrian" <br******@ihug.co.nz> wrote:
If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?


div{display:inline-block}

and text-align{center} on the containing block (not supported by IE and
Mozilla).

--
Spartanicus
Jul 20 '05 #2
Els
KiwiBrian wrote:
If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?


Set the width of the div to auto, and the left and right
margin to equal widths.
For IE5 (and 4) you'll need text-align:center; on the parent
element.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #3
Els <el*********@tiscali.nl> wrote:
If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?


Set the width of the div to auto


And what do you think this does?

--
Spartanicus
Jul 20 '05 #4
Els
Spartanicus wrote:
"KiwiBrian" <br******@ihug.co.nz> wrote:
If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?
div{display:inline-block}

and text-align{center}

^^^^^^
Huh?
on the containing block (not supported by IE and
Mozilla).


You mean that inline-block is not supported by IE and Mozilla.
div {text-align:center;} certainly is ;-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #5
Els
Spartanicus wrote:
Els <el*********@tiscali.nl> wrote:
If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?


Set the width of the div to auto


And what do you think this does?


Have the div shrink and widen with the window.

Ah yes, sorry, that's not what the OP wanted.
Will read better next time...

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #6
Els <el*********@tiscali.nl> wrote:
Set the width of the div to auto


And what do you think this does?


Have the div shrink and widen with the window.


http://www.w3.org/TR/CSS21/visudet.h...width-property
Initial: auto

--
Spartanicus
Jul 20 '05 #7
On Mon, 14 Jun 2004 18:51:35 +1200, KiwiBrian <br******@ihug.co.nz> wrote:
If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table
cell
does, how do I code this in CSS?

Brian Tozer


If you do not explicitly set a width, the width will basically be 100% of
the containing block.

div.this {text-align: center;}

will align center all text within. If you want the text to not come close
to the edges, add

margin: auto 10%;

or whatever margin you prefer (in % or em is probably best).
Jul 20 '05 #8
Els
Spartanicus wrote:
Els <el*********@tiscali.nl> wrote:
Set the width of the div to auto

And what do you think this does?


Have the div shrink and widen with the window.


http://www.w3.org/TR/CSS21/visudet.h...width-property
Initial: auto


You won't believe this, but there are people who,
accidentally perhaps, write in their stylesheet:
div{width:100px;}
To help a particular div gain his initial value back, you
can put div.iwantthiscentered{width:auto;}

If one would never need to set a div's width to auto, the
value wouldn't need to be in the specs, would it?

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #9
Els <el*********@tiscali.nl> wrote:
If one would never need to set a div's width to auto, the
value wouldn't need to be in the specs, would it?


http://www.w3.org/TR/CSS21/visudet.h...width-property
Applies to: all elements but non-replaced inline elements, table rows,
and row groups

--
Spartanicus
Jul 20 '05 #10
Els
Spartanicus wrote:
Els <el*********@tiscali.nl> wrote:
If one would never need to set a div's width to auto, the
value wouldn't need to be in the specs, would it?


http://www.w3.org/TR/CSS21/visudet.h...width-property
Applies to: all elements but non-replaced inline elements, table rows,
and row groups


What's this, nitpicking?

Read the two sentences you just snipped.
Snipping is not _always_ a good thing, Sparty.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #11
Els <el*********@tiscali.nl> wrote:
If one would never need to set a div's width to auto, the
value wouldn't need to be in the specs, would it?


http://www.w3.org/TR/CSS21/visudet.h...width-property
Applies to: all elements but non-replaced inline elements, table rows,
and row groups


What's this, nitpicking?


Pointing out that your assumption that the width property and it's
values only apply to div's is a false one.

--
Spartanicus
Jul 20 '05 #12
Els
Spartanicus wrote:
Els <el*********@tiscali.nl> wrote:
If one would never need to set a div's width to auto, the
value wouldn't need to be in the specs, would it?

http://www.w3.org/TR/CSS21/visudet.h...width-property
Applies to: all elements but non-replaced inline elements, table rows,
and row groups


What's this, nitpicking?


Pointing out that your assumption that the width property and it's
values only apply to div's is a false one.


Where did I assume that?
I certainly didn't. The OP said:
"If I want to horizontally center a div on a page"
I said to give it width:auto.
Then you said the initial value is already auto.
Then I said that if someone where to have stated
div{width:100px;} in the stylesheet, it would certainly help
to give width:auto to a particular div.

Now point out where I was wrongly assuming anything?

You know what? I won't respond anymore. Got better things to
do than discuss nothing for no reason.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #13
Els <el*********@tiscali.nl> wrote:
What's this, nitpicking?
Pointing out that your assumption that the width property and it's
values only apply to div's is a false one.


Where did I assume that?


Here:
>If one would never need to set a div's width to auto, the
>value wouldn't need to be in the specs, would it?

I certainly didn't. The OP said:
"If I want to horizontally center a div on a page"
I said to give it width:auto.
Then you said the initial value is already auto.
Then I said that if someone where to have stated
div{width:100px;} in the stylesheet, it would certainly help
to give width:auto to a particular div.


That assumption was ridiculous to begin with, and helping would be to
point out that in such a case the width:100px should be removed, and not
undone at a (hopefully) later point in the css by changing it to auto.

--
Spartanicus
Jul 20 '05 #14
Els
Spartanicus wrote:
Els <el*********@tiscali.nl> wrote:
What's this, nitpicking?

Pointing out that your assumption that the width property and it's
values only apply to div's is a false one.


Where did I assume that?


Here:
>>If one would never need to set a div's width to auto, the
>>value wouldn't need to be in the specs, would it?

That's the nitpicking part.
I certainly didn't. The OP said:
"If I want to horizontally center a div on a page"
I said to give it width:auto.
Then you said the initial value is already auto.
Then I said that if someone where to have stated
div{width:100px;} in the stylesheet, it would certainly help
to give width:auto to a particular div.


That assumption was ridiculous to begin with, and helping would be to
point out that in such a case the width:100px should be removed, and not
undone at a (hopefully) later point in the css by changing it to auto.


Imagine yourself a page with for whatever reason: 10 divs.
They _all_ are 100px wide. (one reason that springs to mind,
could be that they are holding thumbnails with captions)
Then we need a div with width:auto.
You are saying that assigning a class to each and every
100px wide div is better than
div{width:100px;}
div.special{width:auto;}
??

As for the nitpicking bit: of course you are right, that
that sentence, seperated from the issue in the thread, is
not correct. Well, there's your right, if you want it.
As for never having to set width for a div, I just proved
that that's not always the case, therefore there was no need
for you to explain to me that the initial value of width of
divs (and other stuff too!!!) is auto.

Now I'm tired. Stop it.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #15
On Mon, 14 Jun 2004 16:44:12 +0100, Spartanicus <me@privacy.net> wrote:
Els <el*********@tiscali.nl> wrote:
If one would never need to set a div's width to auto, the
value wouldn't need to be in the specs, would it?

http://www.w3.org/TR/CSS21/visudet.h...width-property
Applies to: all elements but non-replaced inline elements, table rows,
and row groups


What's this, nitpicking?


Pointing out that your assumption that the width property and it's
values only apply to div's is a false one.


That is decidedly not what I read in her post.
Jul 20 '05 #16
Els <el*********@tiscali.nl> wrote:
Imagine yourself a page with for whatever reason: 10 divs.


What does this have to do with the OPs post to which you responded?

--
Spartanicus
Jul 20 '05 #17
Els wrote:
Set the width of the div to auto


That will create a box equal to the width of the containing block's
content box. If that's the desire, why not just leave width out?

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #18
KiwiBrian wrote:
If I want to horizontally center a div on a page, but have the div of
undefined width, so that it contains whatever is within it, as a table cell
does, how do I code this in CSS?


div {display: table-cell; margin-left: auto; margin-right: auto}

That's closest to what I think you want. However, it will not work in
IE/Win, which cannot do table-like presentation on non-table elements.
Also, IE/Win 5.x (and IE/Win 6.0 in quirks mode) is screwy when
centering blocks.

For IE, you must specify either a width for the div, or widths for the
margin (which may not be much different for your purposes).

http://dorward.me.uk/www/centre/

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #19
Els
Spartanicus wrote:
Els <el*********@tiscali.nl> wrote:
Imagine yourself a page with for whatever reason: 10 divs.


What does this have to do with the OPs post to which you responded?


Nothing more than the fact that I don't know in what
circumstances the OP is wanting to place the div he asked
about, therefore it doesn't hurt to tell him "width:auto;",
as who knows, maybe it is the eleventh div in his page.
I can't know if not specifying width:auto leaves that div's
width to its initial value.

Compare it to my own standard
"html,body{width:99.5%;height:99.5%;margin:0;paddi ng:0;}"
It's not in the specs, there isn't always the need, but I
just implement it always, taking away problems which might
never arise if I didn't.

Now you will come back again, saying that that's the OP's
responsibility, not mine.
Well, I'll give you your "you're right", because you seem to
want it so badly. I just chose to add some superfluous
(depending on the situation) information, which of course, I
could have clarified more, so that the OP would never by
accident have the words "width:auto" specified in his
stylesheet if not absolutely needed. My choice. Does it hurt
you so much that you are still spending time on this thread?

I've said twice already that I'd stop, this is the third
time. Now I'm bored with it. I quit. Even if you'd bring new
valid or invalid evidence of my wrongdoing. It's done. Over.
Finished. (just this thread ;-) )

Have a nice day, Sparta :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #20
Els
Brian wrote:
Els wrote:
Set the width of the div to auto


That will create a box equal to the width of the containing block's
content box. If that's the desire, why not just leave width out?


Yep, I could have left width out. And if I would have read
the OP's question properly in the first place, I would have
given an altogether different solution.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #21
Brian <us*****@julietremblay.com.invalid> wrote:
div {display: table-cell; margin-left: auto; margin-right: auto}


This should not work in a standard compliant UA, set display to table.
Caveats may apply as the auto generated anonymous css table boxes don't
take certain properties (as demonstrated by your example), best avoided
unless the OP understands css tables (and if IE support is not needed).

--
Spartanicus
Jul 20 '05 #22
On Tue, 15 Jun 2004, Els wrote:
Spartanicus wrote:

Nothing more than the fact that I don't know in what
circumstances the OP is wanting to place the div he asked
about, therefore it doesn't hurt to tell him "width:auto;",


Eh? You're saying you haven't understood the question (which is
perfectly reasonable in the circumstances) and therefore it doesn't
hurt to give an answer which is quite likely to be irrelevant?

Cue Spock for a comment on that.
Jul 20 '05 #23
On Tue, 15 Jun 2004 11:03:02 +0100, Alan J. Flavell <fl*****@ph.gla.ac.uk>
wrote:
On Tue, 15 Jun 2004, Els wrote:
Spartanicus wrote:

Nothing more than the fact that I don't know in what
circumstances the OP is wanting to place the div he asked
about, therefore it doesn't hurt to tell him "width:auto;",


Eh? You're saying you haven't understood the question (which is
perfectly reasonable in the circumstances) and therefore it doesn't
hurt to give an answer which is quite likely to be irrelevant?

Cue Spock for a comment on that.


"Fascinating..."
Jul 20 '05 #24
*Neal* wrote:
*Alan J. Flavell* wrote:
Cue Spock for a comment on that.


"Fascinating..."


QUOTE: 'Fascinating is a word I use for the unexpected. In this case, I
should think "interesting" would suffice.'
--
Andrew Urquhart
- FAQ: www.css.nu/faq/ciwas-aFAQ.html
- Archive: www.tinyurl.com/ysjbm (Google Groups)
- My reply address is invalid, use: www.andrewu.co.uk/contact/
Jul 20 '05 #25
Spartanicus wrote:
Brian wrote:
div {display: table-cell; margin-left: auto; margin-right: auto}


This should not work in a standard compliant UA, set display to table.


Oops, my apologies. May I ask why "table-cell" display does not work,
but table does?

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #26
Brian <us*****@julietremblay.com.invalid> wrote:
div {display: table-cell; margin-left: auto; margin-right: auto}


This should not work in a standard compliant UA, set display to table.


Oops, my apologies. May I ask why "table-cell" display does not work,
but table does?


A table cell can't have margins, a table can.

--
Spartanicus
Jul 20 '05 #27
Spartanicus wrote:
Brian <us*****@julietremblay.com.invalid> wrote:
div {display: table-cell; margin-left: auto; margin-right: auto}

This should not work in a standard compliant UA, set display to
table.


Oops, my apologies. May I ask why "table-cell" display does not work,
but table does?


A table cell can't have margins, a table can.


A table cell can have a margin after applying
td { display: block }
to it. But browser support is limited. (Mozilla & Opera are OK, IE isn't).

It doesn't help this case.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #28

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

Similar topics

2
by: David Winter | last post by:
This is a totally trivial CSS problem, I'm sure, but I don't get it. I want a centered DIV with a fixed width between two other DIVs that should fill the rest of the window/viewport (= 100%). How...
4
by: Mimo Zus | last post by:
I'm hoping that someone can explain what's going on; better yet provide a workaround. I'm designing a centered CSS site based on a 550 pixel wide vertical background image. Onto this background...
4
by: yawnmoth | last post by:
The buy behind the csszengarden has a tutorial on how to center absolutely positioned elements. Here's the last example: http://www.mezzoblue.com/tests/centered-css/ex5.html I've tried...
17
by: Stian Lund | last post by:
Hello, I've been struggling with this problem for a while now, so I though I'd get some input from anyone more skilled with CSS than I am. I'm actually trying to accomplish two things with this:...
19
by: Holger Hasselbach | last post by:
- The value of the object allocated by the malloc function is used (7.20.3.3). - The value of any bytes in a new object allocated by the realloc function beyond the size of the old object are used...
17
by: No One | last post by:
Is there a way to keep a control centered inside a form without having to recalculate everytime the form is resized?
5
by: Richard Shewmaker | last post by:
Hi. I've been using CSS for basic stuff, mostly concerning fonts. I want to get going with using CSS fully. Two days ago I purchased O'Reilly's "Cascading Style Sheets" and "CSS Cookbook." I've...
12
by: deko | last post by:
I'm trying to get a 1px border around the content section of this page: http://www.clearpointsystems.com As you will see, I have a header/nav bar (looks correct), but the border around the...
9
by: alice | last post by:
I've been slowly learning CSS, but wanting to jump ahead and get a page to have 4 columns of text that are centered on the page, no matter how big the monitor/browser/window, I'd like each one to...
1
by: Maxime | last post by:
Hello, I want to make a button that automatically resizes according to the text length and the font size (which can be changed in firefox pretty easily with the browser). The button already...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
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...
1
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...
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: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
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
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.