[HELP] How to align DIV in the center?

Discussion in 'HTML' started by Sypher, Jan 28, 2005.

  1. Sypher

    Sypher Guest

    I have a webpage with a DIV, that contains other 3 divs ...
    How can i align the container DIV in the middle of the webpage?
    It has not a "align" attribute ...
    Please, someone help! ;P Im losing my sleep for this! ;P


    --
    Regards,
    Sypher.
     
    Sypher, Jan 28, 2005
    #1
    1. Advertising

  2. Sypher wrote:

    > I have a webpage with a DIV, that contains other 3 divs ...
    > How can i align the container DIV in the middle of the webpage?
    > It has not a "align" attribute ...


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


    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Jan 28, 2005
    #2
    1. Advertising

  3. Sypher

    Richard Guest

    On Fri, 28 Jan 2005 17:12:30 GMT Sypher wrote:

    > I have a webpage with a DIV, that contains other 3 divs ...
    > How can i align the container DIV in the middle of the webpage?
    > It has not a "align" attribute ...
    > Please, someone help! ;P Im losing my sleep for this! ;P


    margin:30%;
    padding:30%;

    for css that would be "text-align:" not "align".
    Which also places any text in the same justification.
    So if you use text-align for the container, then use it to readjust your
    inner divisions accordingly.

    Also search for "centering divisions on page".
     
    Richard, Jan 28, 2005
    #3
  4. Sypher

    Richard Guest

    On Fri, 28 Jan 2005 17:12:30 GMT Sypher wrote:

    > I have a webpage with a DIV, that contains other 3 divs ...
    > How can i align the container DIV in the middle of the webpage?
    > It has not a "align" attribute ...
    > Please, someone help! ;P Im losing my sleep for this! ;P


    Actually, it's quite simple.
    <center><div style="text-align:left;">This text will appear in the center of
    the page</div></center>.

    div.sample { text-align:left; border:2px solid black; width:100px;
    height:100px;}

    <center><div class="sample">This is a sample centered
    division</div></center>
     
    Richard, Jan 28, 2005
    #4
  5. Richard wrote:
    > Actually, it's quite simple.
    > <center><div style="text-align:left;">This text will appear in the center of
    > the page</div></center>.


    Do you even try to get it right anymore?
     
    Leif K-Brooks, Jan 29, 2005
    #5
  6. Sypher

    Richard Guest

    On Fri, 28 Jan 2005 19:50:23 -0500 Leif K-Brooks wrote:

    > Richard wrote:
    >> Actually, it's quite simple.
    >> <center><div style="text-align:left;">This text will appear in the
    >> center of
    >> the page</div></center>.


    > Do you even try to get it right anymore?


    Will you stop with the damn bashing because I posted something?
    I tested it first to be sure it was correct, it is.
    Prove me wrong or shut the **** up.
     
    Richard, Jan 29, 2005
    #6
  7. Sypher

    Oli Filth Guest

    Richard wrote:
    > On Fri, 28 Jan 2005 17:12:30 GMT Sypher wrote:
    >
    >
    >>I have a webpage with a DIV, that contains other 3 divs ...
    >>How can i align the container DIV in the middle of the webpage?
    >>It has not a "align" attribute ...
    >>Please, someone help! ;P Im losing my sleep for this! ;P

    >
    >
    > Actually, it's quite simple.
    > <center><div style="text-align:left;">This text will appear in the center of
    > the page</div></center>.
    >
    > div.sample { text-align:left; border:2px solid black; width:100px;
    > height:100px;}
    >
    > <center><div class="sample">This is a sample centered
    > division</div></center>
    >


    I'm assuming you're doing this just to confuse potential newbies? That
    sounds like a fun game to me... cock


    --
    Oli
     
    Oli Filth, Jan 29, 2005
    #7
  8. Richard wrote:
    > On Fri, 28 Jan 2005 17:12:30 GMT Sypher wrote:
    >
    >
    >>I have a webpage with a DIV, that contains other 3 divs ...
    >>How can i align the container DIV in the middle of the webpage?
    >>It has not a "align" attribute ...
    >>Please, someone help! ;P Im losing my sleep for this! ;P

    >
    >
    > Actually, it's quite simple.
    > <center><div style="text-align:left;">This text will appear in the center of
    > the page</div></center>.
    >
    > div.sample { text-align:left; border:2px solid black; width:100px;
    > height:100px;}
    >
    > <center><div class="sample">This is a sample centered
    > division</div></center>
    >

    lost in translation?

    --
    www.daszeichen.ch
    remove nixspam to reply

    ----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
    http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
    ----= East and West-Coast Server Farms - Total Privacy via Encryption =----
     
    Bernhard Sturm, Jan 29, 2005
    #8
  9. Sypher

    Oli Filth Guest

    Richard wrote:
    > On Fri, 28 Jan 2005 19:50:23 -0500 Leif K-Brooks wrote:
    >
    >
    >>Richard wrote:
    >>
    >>>Actually, it's quite simple.
    >>><center><div style="text-align:left;">This text will appear in the
    >>>center of
    >>>the page</div></center>.

    >
    >
    >>Do you even try to get it right anymore?

    >
    >
    > Will you stop with the damn bashing because I posted something?
    > I tested it first to be sure it was correct, it is.
    > Prove me wrong or shut the **** up.
    >
    >


    Why don't you stop posting posting bullshit and deprecated HTML? Nobwank.

    --
    Oli
     
    Oli Filth, Jan 29, 2005
    #9
  10. [OT] Lost In Translation was Re: [HELP] How to align DIV in the center?

    Bernhard Sturm wrote:

    > Richard wrote:


    >> <center><div style="text-align:left;">This text will appear in the center of
    >> the page</div></center>.


    >> div.sample { text-align:left; border:2px solid black; width:100px;
    >> height:100px;}


    >> <center><div class="sample">This is a sample centered
    >> division</div></center>


    > lost in translation?


    A bit of OT fun on that topic:

    http://www.tashian.com/multibabel/

    --
    Blinky Linux Registered User 297263

    Upgrading From IE http://blinkynet.net/comp/upgrade.html
    Mozilla Firefox http://www.mozilla.org/products/firefox/
     
    Blinky the Shark, Jan 29, 2005
    #10
  11. Richard wrote:

    >> How can i align the container DIV in the middle of the webpage?
    >> It has not a "align" attribute ...


    > Actually, it's quite simple.
    > <center>


    Since the OP says there is no align attribute for DIV, he is presumably
    using HTML 4.01 Strict (or possibly XHTML 1.0 Strict / XHTML 1.1).

    Those languages don't have <center> elements either.

    (And of course, the element is deprecated, and the job falls in the scope of
    CSS, not modern HTML)

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Jan 29, 2005
    #11
  12. Sypher

    Sid Ismail Guest

    On Sat, 29 Jan 2005 02:00:24 GMT, Oli Filth
    <> wrote:

    : Richard wrote:
    : > On Fri, 28 Jan 2005 19:50:23 -0500 Leif K-Brooks wrote:
    : >
    : >
    : >>Richard wrote:
    : >>
    : >>>Actually, it's quite simple.
    : >>><center><div style="text-align:left;">This text will appear in the
    : >>>center of
    : >>>the page</div></center>.
    : >
    : >
    : >>Do you even try to get it right anymore?
    : >
    : >
    : > Will you stop with the damn bashing because I posted something?
    : > I tested it first to be sure it was correct, it is.
    : > Prove me wrong or shut the **** up.
    : >
    : >
    :
    : Why don't you stop posting posting bullshit and deprecated HTML? Nobwank.


    Richard - you are formally on Pension from this group now. Now start
    decreasing your handicap - buy a Jack Nicklaus instruction video - and
    start with a solo pursuit. Life is more than getting insults.

    Sid
     
    Sid Ismail, Jan 29, 2005
    #12
  13. Sypher

    Henry Guest

    Leif K-Brooks wrote:
    > Richard wrote:
    >
    >> Actually, it's quite simple.
    >> <center><div style="text-align:left;">This text will appear in the
    >> center of
    >> the page</div></center>.

    >
    >
    > Do you even try to get it right anymore?



    So far no one got i right. I went to http://dorward.me.uk/www/centre/ to
    check how it should be done.


    OMG!!!

    Some citations...

    "Yes, it is badly named. "inline-align" would probably have been a
    better choice.

    Point of clarification: While the text-align property is applied to the
    <h1>, the content it positions is the text inside the element, not the
    element itself."


    Than goes....

    "Block level content includes such elements as <h1>, <h2>, <p>, <table>,
    and <div>. To centre block level elements set their left and right
    margins to auto (*but see IE Bugs*)."

    Than goes...

    "It is possible to work around this, but both methods are something of a
    nasty hack.
    The inline CSS hack"


    I really wonder which idiot has decided that <center> is obsolete and
    gave us wonderful solution - style="margin-left: auto; margin-right: auto;"

    IMHO this is a pure idiocy and no wonder M$ doesn't want to fix the
    problem, if for them that new idiotic idea is the real problem.


    Just check how it works. Only my idea is working properly and validates.

    And frankly I don't give a shit if validates (It does) or is deprecated
    or not. The goal is achieved and code is working without any hacks.

    Can be done in 10 seconds.

    Sorry but using hacks is a huge step backwards.

    ------------------------------------------------------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>My Heading</title>
    </head>

    <body>
    <h1 style="margin-left: auto; margin-right: auto;">
    My Heading
    </h1>

    <h1 style="margin-left: auto; margin-right: auto; width: 50%;">
    My Heading
    </h1>

    <center><div style="text-align:left;">This text will appear in the center of
    the page</div></center>.

    <div align="center">
    <table border="0" width="100%">
    <tr>
    <td valign="top">
    <h1 align="center">Henry's text will appear in the centre of the
    page.</h1>
    </td>
    </tr>
    </table>
    </div>
    </body>

    </html>
     
    Henry, Jan 30, 2005
    #13
  14. Sypher

    Henry Guest

    Of course can be done without table.

    <h1 align="center">Henry's text will appear in the centre of the page.</h1>


    Of course validates...

    ;)
     
    Henry, Jan 30, 2005
    #14
  15. Sypher

    Oli Filth Guest

    Henry wrote:
    > Of course can be done without table.
    >
    > <h1 align="center">Henry's text will appear in the centre of the page.</h1>
    >
    >
    > Of course validates...
    >
    > ;)


    Not in (X)HTML Strict.

    --
    Oli
     
    Oli Filth, Jan 30, 2005
    #15
  16. Sypher

    Oli Filth Guest

    Henry wrote:
    > I really wonder which idiot has decided that <center> is obsolete and
    > gave us wonderful solution - style="margin-left: auto; margin-right: auto;"
    >
    > IMHO this is a pure idiocy and no wonder M$ doesn't want to fix the
    > problem, if for them that new idiotic idea is the real problem.
    >


    Maybe because it was never really a valid tag in the first place (only
    included in the HTML 3.2 spec because lots of sites were using it
    already). <CENTER> should rightly not be an HTML tag, because HTML is
    about the semantics of the content, not the layout. Centre-alignment has
    nothing to do with semantics.

    >
    > Just check how it works. Only my idea is working properly and validates.
    >


    Not in (X)HTML Strict it doesn't.

    > And frankly I don't give a shit if validates (It does) or is deprecated
    > or not. The goal is achieved and code is working without any hacks.
    >


    Well, yes <CENTER> is a hack too. You're using a non-existent HTML tag
    which many browsers just happen to support. That sounds like a hack to
    me. No guarantee that a future browser will support it. Then your page
    will look like shit.

    > Can be done in 10 seconds.
    >
    > Sorry but using hacks is a huge step backwards.


    So is using deprecated HTML.


    --
    Oli
     
    Oli Filth, Jan 30, 2005
    #16
  17. Henry wrote:

    > I really wonder which idiot has decided that <center> is obsolete and
    > gave us wonderful solution - style="margin-left: auto; margin-right:
    > auto;"


    Setting the margins to auto is a rather elegent solution IMO. It just seems
    odd since it is very different to the old style technique.

    > IMHO this is a pure idiocy and no wonder M$ doesn't want to fix the
    > problem, if for them that new idiotic idea is the real problem.


    Go back and read the document again. Microsoft *have* fixed it. The hacks
    are there for backwards compatability with obsolete versions of Internet
    Explorer that nobody should be using anymore (for security reasons if
    nothing else). You can ignore the hacks if you like.

    > Can be done in 10 seconds.


    So can setting margins to auto.

    > Sorry but using hacks is a huge step backwards.


    Its a transitional phase while we wait for browsers to catch up. Well, I say
    browsers, I mean MSIE. Unfortunatly their browser isn't a revenue stream
    for Microsoft, so they have little incentive to develop it further.

    > Just check how it works. Only my idea is working properly and validates.


    That is becuase what you want is to center the text inside the heading, but
    you are trying to center the heading itself.

    <h1 style="text-align: center;">Foo</h1>

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Jan 30, 2005
    #17
  18. Sypher

    Henry Guest

    Oli Filth wrote:
    > Henry wrote:
    >
    >> Of course can be done without table.
    >>
    >> <h1 align="center">Henry's text will appear in the centre of the
    >> page.</h1>
    >>
    >> Of course validates...
    >>
    >> ;)

    >
    >
    > Not in (X)HTML Strict.




    So what?

    This will work maybe in every browser without ANY problems.

    Goal achieved and it doesn't matter if someone doesn't like the code.

    Validator likes it and public does as well.

    The rest... who cares.

    If someone is asking where is a monument, the wise man will say:
    int the center.

    Smart ass will say: 50% from left side and 50% from right one.

    He is just a smart ass, making life others more difficult.

    ;)
     
    Henry, Jan 30, 2005
    #18
  19. Henry wrote:

    >> Not in (X)HTML Strict.


    > So what?


    The OP is almost certainly using (X)HTML Strict.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Jan 30, 2005
    #19
  20. Sypher

    dorayme Guest

    > From: Oli Filth <>
    > Organization: NTL
    > Newsgroups: alt.html
    > Date: Sun, 30 Jan 2005 02:43:54 GMT
    > Subject: Re: [HELP] How to align DIV in the center?
    >
    > Henry wrote:
    >> I really wonder which idiot has decided that <center> is obsolete and
    >> gave us wonderful solution - style="margin-left: auto; margin-right: auto;"
    >>
    >> IMHO this is a pure idiocy and no wonder M$ doesn't want to fix the
    >> problem, if for them that new idiotic idea is the real problem.
    >>

    >
    > Maybe because it was never really a valid tag in the first place (only
    > included in the HTML 3.2 spec because lots of sites were using it
    > already). <CENTER> should rightly not be an HTML tag, because HTML is
    > about the semantics of the content, not the layout. Centre-alignment has
    > nothing to do with semantics.
    >
    >>
    >> Just check how it works. Only my idea is working properly and validates.
    >>

    >
    > Not in (X)HTML Strict it doesn't.
    >
    >> And frankly I don't give a shit if validates (It does) or is deprecated
    >> or not. The goal is achieved and code is working without any hacks.
    >>

    >
    > Well, yes <CENTER> is a hack too. You're using a non-existent HTML tag
    > which many browsers just happen to support. That sounds like a hack to
    > me. No guarantee that a future browser will support it. Then your page
    > will look like shit.
    >
    >> Can be done in 10 seconds.
    >>
    >> Sorry but using hacks is a huge step backwards.

    >
    > So is using deprecated HTML.
    >
    >
    > --
    > Oli



    This issue is not going to go away. The idea of separating the semantics
    from the style is a nice idea and it can be done and it has many advantages.
    But there is a level of complexity and difficulty associated with its
    implementation. (analogy: I remember a Basic program called QuickBasic which
    was a lot of fun to use because it was so forgiving of slack code hurriedly
    written to give quick results, for later classier work one needed to use
    FutureBasic which became much more strict. Like having a strict and cruel
    sounding stepmom around then! (on a Mac)).

    Those who are irritated by the need for rigour are often understandably
    missing that thing of being able to write html on the fly in a simple manner
    and this is understandable, having to be held to a higher standard takes a
    lot of the fun out of things for a lot of the less able or rigorous and
    patient types. I am not arguing here the merits. If I had to side with one
    of these trends, I would have to back rigour given the number of different
    platforms and computer types. But I would be rather sympathetic to the
    formal allowance of easy style tags in the html for those who want to write
    thus. Simpler than the inline css constructions. Like the center tag and the
    font tag and whatever so many people like to use easily. I guess I am
    arguing here for the retention for a long time of the 3.2 and 4 standards
    for browsers. And if the amateurs are irritated by the strictness of later
    standards, they may not feel the pressure to use it. There is a
    psychological pressure to deprecation!

    Professionals need not worry, they should hold to higher standards. Let the
    old tags, the deprecated ones and the banned ones (in later xhtml0) run free
    and it be the mark of the amateur. Pros can simply refuse to deal with such
    code. Let the master mechanics use the proper tool for the job, let the
    amateur use a shifter to hammer things in when they feel like it...

    Perhaps there should be a newsgroup for html for the pros, rigour being the
    philosophy and leave the amateurs some standing, an area where they are not
    constantly belittled and themselves irritated like hell. Let them have 3.2
    and 4.

    dorayme

    (probably just an amateur at heart even tho he does make a sort of a living
    from it and tries to rise to higher standards...)
     
    dorayme, Feb 9, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,159
  2. Ben Amada

    Replacement for <div align="center">

    Ben Amada, Nov 30, 2005, in forum: ASP .Net
    Replies:
    11
    Views:
    16,287
    Ben Amada
    Dec 1, 2005
  3. tshad

    text-align vs align

    tshad, Jun 23, 2005, in forum: HTML
    Replies:
    1
    Views:
    1,266
    David Dorward
    Jun 23, 2005
  4. Steve Richter
    Replies:
    1
    Views:
    902
    Mark Rae
    Jun 24, 2007
  5. Gernot Frisch

    center div over another div

    Gernot Frisch, Mar 16, 2006, in forum: Javascript
    Replies:
    1
    Views:
    183
    Randy Webb
    Mar 16, 2006
Loading...

Share This Page