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 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
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 -
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
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 -
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 -
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).
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 -
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
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 -
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
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 -
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
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 -
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.
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
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/
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/
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 -
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 -
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
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.
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..."
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/
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
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/ This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
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...
|
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...
|
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...
|
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:...
|
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...
|
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?
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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)...
|
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....
|
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
|
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...
| |