How do I use CSS to center child elements?

Discussion in 'HTML' started by Joshua Beall, Oct 30, 2003.

  1. Joshua Beall

    Joshua Beall Guest

    Take a look at this page:

    http://joshuabeall.com/pages/sample.htm

    I want to center the left sidebar, centerbar, and right sidebar. How would
    I do this?

    In the past I pretty much used HTML tables for everything, and I am trying
    to learn how to switch over to CSS, so I am sure I must just be missing
    something.

    -Josh
     
    Joshua Beall, Oct 30, 2003
    #1
    1. Advertising

  2. > I want to center the left sidebar, centerbar, and right sidebar. How
    would
    > I do this?
    >

    Why not use absolute positioning ?

    ..mastercontainer
    {
    BORDER: 2px #e0e0e0 solid;
    position: absolute;
    top: 100px;
    left: 200px;
    WIDTH: 100%;
    text-align: center;
    }

    Don't use SPAN, use DIV

    I'm no expert, but this works for me, maybe someone else could tell us both
    if there is a better way
     
    Chris Leonard, Oct 31, 2003
    #2
    1. Advertising

  3. Joshua Beall

    Joshua Beall Guest

    "Chris Leonard" <> wrote in message
    news:bns9un$ord$...
    > Why not use absolute positioning ?


    Wouldn't that position things absolutely, as the name suggests? Thus, it
    would only be centered if the browser is at the right size. Otherwise it
    would be offset left or right. Is this correct?

    > .mastercontainer
    > {
    > BORDER: 2px #e0e0e0 solid;
    > position: absolute;
    > top: 100px;
    > left: 200px;
    > WIDTH: 100%;
    > text-align: center;
    > }
    >
    > Don't use SPAN, use DIV


    How come? I used <span> because I thought <div> would put a line break
    there, and I thought <span> was the same as <div>, except that it does not
    put a line break. Is this wrong?
     
    Joshua Beall, Oct 31, 2003
    #3
  4. Joshua Beall

    Richard Guest

    Joshua Beall wrote:

    > "Chris Leonard" <> wrote in message
    > news:bns9un$ord$...
    >> Why not use absolute positioning ?


    > Wouldn't that position things absolutely, as the name suggests? Thus,
    > it
    > would only be centered if the browser is at the right size. Otherwise
    > it
    > would be offset left or right. Is this correct?


    No. The position is for the div itself, not the content. There are other
    tricks to be used for the content.
     
    Richard, Oct 31, 2003
    #4
  5. Joshua Beall

    informant Guest

    "Richard" <anom@anom> wrote in message news:...
    > Joshua Beall wrote:
    >
    > > "Chris Leonard" <> wrote in message
    > > news:bns9un$ord$...
    > >> Why not use absolute positioning ?

    >
    > > Wouldn't that position things absolutely, as the name suggests? Thus,
    > > it
    > > would only be centered if the browser is at the right size. Otherwise
    > > it
    > > would be offset left or right. Is this correct?

    >
    > No. The position is for the div itself, not the content. There are other
    > tricks to be used for the content.


    Could you explain these tricks for the poster, Mr. Bullis?
     
    informant, Oct 31, 2003
    #5
  6. Joshua Beall wrote:

    > Wouldn't that position things absolutely, as the name suggests? Thus, it
    > would only be centered if the browser is at the right size.


    Not if it was positioned within an centred block of the right width.

    --
    David Dorward http://dorward.me.uk/
     
    David Dorward, Oct 31, 2003
    #6
  7. Joshua Beall

    Richard Guest

    informant wrote:


    > "Richard" <anom@anom> wrote in message
    > news:...
    >> Joshua Beall wrote:


    >> > "Chris Leonard" <> wrote in message
    >> > news:bns9un$ord$...
    >> >> Why not use absolute positioning ?


    >> > Wouldn't that position things absolutely, as the name suggests?

    >> Thus,
    >> > it
    >> > would only be centered if the browser is at the right size.

    >> Otherwise
    >> > it
    >> > would be offset left or right. Is this correct?


    >> No. The position is for the div itself, not the content. There are
    >> other
    >> tricks to be used for the content.


    > Could you explain these tricks for the poster, Mr. Bullis?



    <bend over>
    shove it up your ass
    </bend over>
     
    Richard, Oct 31, 2003
    #7
  8. Joshua Beall

    informant Guest

    "Richard" <anom@anom> wrote in message
    news:...
    > informant wrote:
    >
    >
    > > "Richard" <anom@anom> wrote in message
    > > news:...
    > >> Joshua Beall wrote:

    >
    > >> > "Chris Leonard" <> wrote in message
    > >> > news:bns9un$ord$...
    > >> >> Why not use absolute positioning ?

    >
    > >> > Wouldn't that position things absolutely, as the name suggests?
    > >> Thus,
    > >> > it
    > >> > would only be centered if the browser is at the right size.
    > >> Otherwise
    > >> > it
    > >> > would be offset left or right. Is this correct?

    >
    > >> No. The position is for the div itself, not the content. There are
    > >> other
    > >> tricks to be used for the content.

    >
    > > Could you explain these tricks for the poster, Mr. Bullis?

    >
    >
    > <bend over>
    > shove it up your ass
    > </bend over>


    As I suspected, when pressed for real information, you revert to being
    obnoxious.

    --
    Comments about Bullis:
    As unwelcome as you have always been in here....You keep going
    '.....offering idiotic comment after idiotic comment.

    I'm gonna echo these sentiments. We know Bullis is a sick ****.

    This appears to be a field in which you are not qualified to render an
    opinion.

    ....every time I resolve to be more civil on usenet, I see another post from
    "richard" giving someone completely off-the-wall advice with dangerous
    consequences. So instead of saying something uncivil like "richard, you
    clueless, pathetic moron, SHUT THE **** UP!!!" I;ll just bite my tongue and
    say nothing.

    Please stop posting legal advice, as you are clearly not qualified and most
    of your advice is worse than useless.

    Once again, following Richard's advice will end up with you being arrested.

    "Richard" <> wrote: "I may have fantasies involving rape
    of a child, but you're no mindreader and as long as the thoughts remain a
    fantasy, there is no possible way to convict".
     
    informant, Oct 31, 2003
    #8
  9. Joshua Beall

    Joshua Beall Guest

    "David Dorward" <> wrote in message
    news:bnt3fn$k1v$1$...
    > Joshua Beall wrote:
    >
    > > Wouldn't that position things absolutely, as the name suggests? Thus,

    it
    > > would only be centered if the browser is at the right size.

    >
    > Not if it was positioned within an centred block of the right width.


    But then have I not just pushed the problem back to the parent element?
    Because then do I not have to explicitly set the width of the parent element
    to something? I would prefer my layout to be fluid.

    Sorry, I am new to the CSS way of doing things.
     
    Joshua Beall, Oct 31, 2003
    #9
  10. Joshua Beall wrote:

    > But then have I not just pushed the problem back to the parent
    > element? Because then do I not have to explicitly set the width of
    > the parent element to something? I would prefer my layout to be
    > fluid.
    >
    > Sorry, I am new to the CSS way of doing things.


    My usual approach to centering blocks inside other blocks:

    ....
    <style type="text/css">
    ..IE5Hack {
    text-align: center; /* quirks-mode IE centers incorrectly using this
    instead of margins, below */
    }

    ..someclass {
    text-align: left;
    margin-left: auto;
    margin-right: auto; /* broadly, if opposing margins are both auto
    then they will end up being equal */
    ...more style...
    }
    </style>
    ....

    <div class="IE5Hack">
    <div class="someclass">
    <p>My content here</p>
    </div>
    </div>

    Note that using divs for both may not be the Right Thing: if the
    content is logically a single paragraph then the inner div is
    superfluous and the class could move to the paragraph itself.

    Owen
     
    Owen Jacobson, Nov 1, 2003
    #10
    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. brucie

    Re: [css] center

    brucie, Jun 22, 2003, in forum: HTML
    Replies:
    0
    Views:
    1,417
    brucie
    Jun 22, 2003
  2. =?Utf-8?B?c2xlbWVu?=

    How to center child controls in a datagrid header?

    =?Utf-8?B?c2xlbWVu?=, Jun 21, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    356
    =?Utf-8?B?c2xlbWVu?=
    Jun 21, 2006
  3. Gerald Aichholzer
    Replies:
    2
    Views:
    2,509
    Gerald Aichholzer
    Jun 27, 2006
  4. Jeff Rodriguez
    Replies:
    23
    Views:
    1,130
    David Schwartz
    Dec 9, 2003
  5. Lanmind

    center two inline elements

    Lanmind, Sep 13, 2008, in forum: HTML
    Replies:
    13
    Views:
    805
    dorayme
    Sep 14, 2008
Loading...

Share This Page