Don't understand text-align

[Robert Nicholson]

So I've got one page where I have an image inside a DIV with
text-align: center and the
image is correctly centered in that block. Making me think that
text-align will center the contents of a block.

Another page I have a series of thumbnails which are themselves a DIV
block wrapping both an image and a caption (float: left) inside a DIV
block with a fixed width which is smaller than the width of the
browser and that DIV block is in another DIV block that is the full
width of the browser.

What I don't understand is why text-align doesn't center the the first
DIV block inside the second.

I know I could bring these in via a left margin but I want everything
to be correctly centered based on the width of the browser.

[Stan Brown]

In article <24**************************@posting.google.com > in
comp.infosystems.www.authoring.stylesheets, Robert Nicholson wrote:

Another page I have a series of thumbnails which are themselves a DIV
block wrapping both an image and a caption (float: left) inside a DIV
block with a fixed width which is smaller than the width of the
browser and that DIV block is in another DIV block that is the full
width of the browser.
I don't follow the above. Surely there is an easier way to do what
you're trying to do?
What I don't understand is why text-align doesn't center the the first
DIV block inside the second.

Anyway, a DIV by default is the full content width of its parent,
minus margin, borders, and padding of the inner DIV. An IMG, by
contrast, has an intrinsic width. That's probably at the root of
your problem, though as I say I don't understand your layout. (Hint:
post a URL with any query. A direct view is worth a thousand words
of description.)

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Eric Bohlman]

ro****@elastica.com (Robert Nicholson) wrote in
news:24**************************@posting.google.c om:

So I've got one page where I have an image inside a DIV with
text-align: center and the
image is correctly centered in that block. Making me think that
text-align will center the contents of a block.
As its name implies, it will center the *text* within the block. Due to a
decision or two back in the early 1990s that seemed like a good idea at the
time but in retrospect seems to call to mind Douglas Adams' assertion about
the problem with ideas that sound good at parties being that such ideas
sound good *only* at parties, images are considered text for such purposes
(in HTML terms, an image is just a funny-looking character).
Another page I have a series of thumbnails which are themselves a DIV
block wrapping both an image and a caption (float: left) inside a DIV
block with a fixed width which is smaller than the width of the
browser and that DIV block is in another DIV block that is the full
width of the browser.

What I don't understand is why text-align doesn't center the the first
DIV block inside the second.

Because a DIV block isn't a text element, it's a block. Blocks themselves
are, in conforming implementations, unaffected by the text-align property
(as you might guess, MSIE/Win prior to version 6 got this wrong, and IE6
will still do it if it's in quirks mode). To center a block, you really
do need to give it a width and then set its horizontal margins to auto.
The need to specify a width seems restrictive, but it's hard to imagine a
way to implement the margin calculations otherwise (since without an
explicit width, how do you determine how wide a block is? You can only do
it in a few special cases, like when there's a single line of text).

[Robert Nicholson]

i have what I wanted working now and I understand the block vs incline
issues with text-align and margin: auto

However, during this I wasn't interested in whether or not there was a
way to wrap an image in a div and _correctly_ set the width of the div
to that of the image. Is there any way to do this? Supposing you
wanted to manipulate the something by putting it in a block it would
be nice to dynamically set the width of that block based on it's
contents.
Eric Bohlman <eb******@earthlink.net> wrote in message news:<Xn*******************************@130.133.1. 4>...

ro****@elastica.com (Robert Nicholson) wrote in
news:24**************************@posting.google.c om:

So I've got one page where I have an image inside a DIV with
text-align: center and the
image is correctly centered in that block. Making me think that
text-align will center the contents of a block.

As its name implies, it will center the *text* within the block. Due to a
decision or two back in the early 1990s that seemed like a good idea at the
time but in retrospect seems to call to mind Douglas Adams' assertion about
the problem with ideas that sound good at parties being that such ideas
sound good *only* at parties, images are considered text for such purposes
(in HTML terms, an image is just a funny-looking character).

Another page I have a series of thumbnails which are themselves a DIV
block wrapping both an image and a caption (float: left) inside a DIV
block with a fixed width which is smaller than the width of the
browser and that DIV block is in another DIV block that is the full
width of the browser.

What I don't understand is why text-align doesn't center the the first
DIV block inside the second.

Because a DIV block isn't a text element, it's a block. Blocks themselves
are, in conforming implementations, unaffected by the text-align property
(as you might guess, MSIE/Win prior to version 6 got this wrong, and IE6
will still do it if it's in quirks mode). To center a block, you really
do need to give it a width and then set its horizontal margins to auto.
The need to specify a width seems restrictive, but it's hard to imagine a
way to implement the margin calculations otherwise (since without an
explicit width, how do you determine how wide a block is? You can only do
it in a few special cases, like when there's a single line of text).

[Robert Nicholson]

I have what I wanted working however should you want to take a look
and critique it
feel free.

http://www.elastica.com/cgi-bin/show...me=weddingbell

One thing that I felt might be useful in the future was to be able to
wrap an image in a div
and manipulate the div. In doing this just exactly how can you set the
width of the div to
be that of the image plus a bit? I haven't seen anyways to dynamically
control the width
of div.

Stan Brown <th************@fastmail.fm> wrote in message news:<MP************************@news.odyssey.net> ...

In article <24**************************@posting.google.com > in
comp.infosystems.www.authoring.stylesheets, Robert Nicholson wrote:

Another page I have a series of thumbnails which are themselves a DIV
block wrapping both an image and a caption (float: left) inside a DIV
block with a fixed width which is smaller than the width of the
browser and that DIV block is in another DIV block that is the full
width of the browser.

I don't follow the above. Surely there is an easier way to do what
you're trying to do?

What I don't understand is why text-align doesn't center the the first
DIV block inside the second.

Anyway, a DIV by default is the full content width of its parent,
minus margin, borders, and padding of the inner DIV. An IMG, by
contrast, has an intrinsic width. That's probably at the root of
your problem, though as I say I don't understand your layout. (Hint:
post a URL with any query. A direct view is worth a thousand words
of description.)

[Stan Brown]

In article <24*************************@posting.google.com> in
comp.infosystems.www.authoring.stylesheets, Robert Nicholson wrote:

I have what I wanted working however should you want to take a look
and critique it

makes it harder to follow discussions.
before the material you're commenting on, it
When you put your comments

http://oakroadsystems.com/genl/unice.htm#upside

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Robert Nicholson]

> Stan Brown <th************@fastmail.fm> wrote in message news:

(Hint:post a URL with any query. A direct view is worth a thousand wordsof description.)

I have what I wanted working however should you want to take a look
and critique it feel free.

http://www.elastica.com/cgi-bin/show...me=weddingbell

One thing that I felt might be useful in the future was to be able to
wrap an image in a div and manipulate the div. In doing this just
exactly how can you set the width of the div to be that of the image
plus a bit? I haven't seen anyway to dynamically control the width of
div.

[Brian]

Robert Nicholson wrote:

One thing that I felt might be useful in the future was to be able to
wrap an image in a div and manipulate the div. In doing this just
exactly how can you set the width of the div to be that of the image
plus a bit?
display: table-cell combined with padding will do the trick, but
afaik, only Opera does display: table-cell. More browsers (Mozilla,
possibly IE6/Win) will shrink a div if that div is floated and its
required width is less than the browser window.
I haven't seen anyway to dynamically control the width of div.

Bearing in mind the KISS principle, a database and server side
scripting language could suggest a width for certain elements.

--
Brian
follow the directions in my address to email me