Re: [CSS] Centering a small block in a larger block

Moved from ciwah

Daniel Déchelotte <maitre_yodan (AT) fr (DOT) club-internet.invalid> wrote:

This is actually two questions in one: how to have a block just fit the
data it contains (see my "table-cell" kludge) and how to have it centered
in a larger block?

My idea is to have my page split into two columns (each half as wide as the
whole page, this is the "bigblock" class), and to have in each of these
columns one, typically narrow, column (this is the "fitblock" class),
horizontally centered within its "bigblock" parent.

I really can't see a "shrink to fit" column working properly, size them
as the containing "columns": as a percentage of the viewport width.

.fitblock { display: table-cell; }

Won't work in IE.

"fitblock" expands and fills its containing "bigblock", nullifying any
attempt to center its content in the left half of the page.

Table cells (real or css) can't have margins (tables can).

--
Spartanicus

Daniel Déchelotte <maitre_yodan (AT) fr (DOT) club-internet.invalid> wrote:

(Note
that it is what I am currently using, see my signature, but I know this is
a Bad Thing and I would like to rely on CSS for that).

http://yo.dan.free.fr/

That design can't adapt to the user's window width, consequently you
might want to rethink it.

If you want to stick with the current design and loose the tables, this
may help you underway:
http://www.spartanicus.utvinternet.ie/test/yodan.htm

I've omitted the styling details, but it uses proper structure and
markup.

--
Spartanicus

Daniel Déchelotte <maitre_yodan (AT) fr (DOT) club-internet.invalid> wrote:

| http://yo.dan.free.fr/
|
| That design can't adapt to the user's window width, [...]

Yes it can.

It produces a horizontal scrollbar far sooner than should be necessary,
and wastes canvas space @ wider window widths. The fact that the content
redistributes itself does not constitute a flexible design.

(Please ignore the javascript thingy that changes
text when you hover a link

I wish I could, it's far to annoying to ignore (hint: try it in Opera).

However, these are all fixed width columns.

They size with the text size as they should.

Using "33%" instead of "15em" as the width of each "sect" does make each
column spread over its third of a page

Which is one of the flaws you should get rid of, it's not using the
canvas space appropriately.

--
Spartanicus