Align DIV center?

Hi,

I'd like to align a <div> within the center of the visual canvas. The text
within the div should be left-aligned. How can I possibly achieve this? So
far I can only align text blocks centrally by using <table align="center"
.... .
Is this also possible for vertical alignment?

TIA,
Axel Dahmen

Axel Dahmen wrote:

I'd like to align a <div> within the center of the visual canvas. The text
within the div should be left-aligned. How can I possibly achieve this? So
far I can only align text blocks centrally by using <table align="center"

Set the width to something smaller than 100% and the margin to auto e.g.
div.someClass {
width: 100%;
margin-left: auto;
margin-right: auto;
}

<div class="someClass">...</div>



--

Martin Honnen
http://JavaScript.FAQTs.com/

"Martin Honnen" <mahotrash (AT) yahoo (DOT) de> wrote

Axel Dahmen wrote:


I'd like to align a <div> within the center of the visual canvas. The
text
within the div should be left-aligned. How can I possibly achieve this?
So
far I can only align text blocks centrally by using <table align="center"

Set the width to something smaller than 100% and the margin to auto e.g.
div.someClass {
width: 100%;
margin-left: auto;
margin-right: auto;
}

div class="someClass">...</div
snip /

and for a fixed width div use

div.someClass{
width: 500px;
position: relative;
left: 50%;
margin-left: -250px; /* half the width of the div */
}


--
Phil Thompson
W: http://www.doubleonegative.com/

On Sun, 21 Nov 2004 15:39:11 -0000, Phil Thompson wrote:

and for a fixed width div use

If I understand your CSS correctly, it will only work for a page
that is 500px wide. Please drag yourself into the third millenium!

Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page.

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:

and for a fixed width div use

div.someClass{
width: 500px;
position: relative;
left: 50%;
margin-left: -250px; /* half the width of the div */
}

No. Please don't answer any posts until you have a clue. Your way makes
content unaccessible, if browser window is smaller than 500px. (it will
be just unaccessible, one also gets a scrollbar, but it doesn't allow one
to scroll left)

If it needs to work on IE<6:
http://dorward.me.uk/www/centre/







--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Martin Honnen wrote:

Axel Dahmen wrote:


I'd like to align a <div> within the center of the visual canvas. The
text
within the div should be left-aligned. How can I possibly achieve
this? So
far I can only align text blocks centrally by using <table align="center"


Set the width to something smaller than 100% and the margin to auto e.g.
div.someClass {
width: 100%;

That should have been e.g.
width: 80%;
of course.

--

Martin Honnen
http://JavaScript.FAQTs.com/

"Andrew Thompson" <SeeMySites (AT) www (DOT) invalid> wrote

On Sun, 21 Nov 2004 15:39:11 -0000, Phil Thompson wrote:

and for a fixed width div use

If I understand your CSS correctly, it will only work for a page
that is 500px wide. Please drag yourself into the third millenium!

a page that is at least 500px wide. I know that isn't wholly accessible but
it is pretty damn close.

Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page.

Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
<big breath> shock horror, a fixed width layout works best.

Read other peoples opinions here: http://www.designbyfire.com/000032.html

p.s. Sorry I spoke.

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

On Sun, 21 Nov 2004 20:02:14 -0000, "Phil Thompson"
<philSPAM (AT) doublonegative (DOT) com> wrote:

Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
big breath> shock horror, a fixed width layout works best.

Perhaps you'd like to offer a few examples of sites where this is the
case?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page.


Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
big breath> shock horror, a fixed width layout works best.

Read other peoples opinions here: http://www.designbyfire.com/000032.html

p.s. Sorry I spoke.

You are quite correct in pointing out this other method, Phil.
Really disappointing isn't it, to get such condascending comments such
as "get a clue" and the one above, instead of a sensible comment such as:
Yes, it does work, but has a drawback when the page is reduced to a
certain point, etc., etc. In certain situations however, it is a viable
and at times possibly the only option.

--
Gus

in comp.infosystems.www.authoring.stylesheets, Phil Thompson wrote:

"Andrew Thompson" <SeeMySites (AT) www (DOT) invalid> wrote in message
news:k7d9w9j9bxnh.19y0pxo2cm4am$.dlg (AT) 40tude (DOT) net...
On Sun, 21 Nov 2004 15:39:11 -0000, Phil Thompson wrote:

and for a fixed width div use

If I understand your CSS correctly, it will only work for a page
that is 500px wide. Please drag yourself into the third millenium!

a page that is at least 500px wide. I know that isn't wholly accessible but
it is pretty damn close.

500px is very bad idea:
1) Most people use much bigger window, so they get large unusable space
2) People using smaller screen will get scrollbar.

There is very little number of people using browser that would be good.

And if you center using the way you showed earlier, people using under
500px window can't use your site. Anything handheld fits that.

Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
big breath> shock horror, a fixed width layout works best.

No, fixed width works never best. Totally fluid is not best always
either, but it is much better than fixed width

Read other peoples opinions here: http://www.designbyfire.com/000032.html

http://www.htmlhelp.com/cgi-
bin/validate.cgi?url=http://www.designbyfire.com/000032.html&warnings=yes

Don't take advice from people that use nested blockquotes to indent
stuff. CSS1 was published 8 years ago, and margins were supported good
enaugh in very first implementions.

From there:
Fixed:

Pros
Guarantees line length readability

You can do that without fixing layout. Read on max-width, and IE
alternative

Guarantees ability to place images into the layout in relation to other
design elements and type size

Unless user changes type size, in which case layout breaks.

Allows for predictable printed results from screen to paper

Most likely one third on right hand side clipped.

Allows for a predictable presentation as intended by the designer

If user has same fontsize and other settings as user.

Liquid:

Cons
Can produce unreadable or hard to scan line lengths

Unless you limit them, which does not require fixed width page, or even
element

Can allow images to become out of proportion to resized type settings
or other design elements

That seem to be only possible if done stupid way.

Can have serious issues when printed, even clipping off some content

That practically never happens on liquid layout. It seems that the writer
has gotten this totally wrong.

Because said site uses fixed layout, I get scrollbar, and can scroll to
see about 30px of orange margin on right. It looks much better when I
force it to fit window. If this had been done differently, it would not
force me to scroll to see margin.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>