margin: auto - but only up to a point

Discussion in 'HTML' started by Tim Streater, Nov 15, 2007.

  1. Tim Streater

    Tim Streater Guest

    I have an element that I would like to be centred on the page, so I use:

    margin-left: auto;
    margin-right: auto;

    This is fine but under some conditions the element then expands to fill
    the whole width of the window (variable content).

    I would like to restrict its expansion to within (say) a few pixels of
    the sides of the window. Can I do this with CSS?

    Thanks,
    Tim Streater, Nov 15, 2007
    #1
    1. Advertising

  2. Tim Streater wrote:
    > I have an element that I would like to be centred on the page, so I use:
    >
    > margin-left: auto;
    > margin-right: auto;
    >
    > This is fine but under some conditions the element then expands to fill
    > the whole width of the window (variable content).
    >
    > I would like to restrict its expansion to within (say) a few pixels of
    > the sides of the window. Can I do this with CSS?


    width: 99%;

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 15, 2007
    #2
    1. Advertising

  3. Tim Streater

    Tim Streater Guest

    In article <a9ed4$473c781e$40cba7a7$>,
    "Jonathan N. Little" <> wrote:

    > Tim Streater wrote:
    > > I have an element that I would like to be centred on the page, so I use:
    > >
    > > margin-left: auto;
    > > margin-right: auto;
    > >
    > > This is fine but under some conditions the element then expands to fill
    > > the whole width of the window (variable content).
    > >
    > > I would like to restrict its expansion to within (say) a few pixels of
    > > the sides of the window. Can I do this with CSS?

    >
    > width: 99%;


    This appears to *force* the element (a table) to occupy 99% of the
    width. I want to *limit* it to that.

    I have:

    table.outerbox
    {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    border-width: 4px;
    border-color: black;
    border-style: solid;
    }


    and then:

    <table class="outerbox">
    rows, cols
    </table>

    Thx - tim
    Tim Streater, Nov 15, 2007
    #3
  4. Tim Streater

    Els Guest

    Tim Streater wrote:

    > In article <a9ed4$473c781e$40cba7a7$>,
    > "Jonathan N. Little" <> wrote:
    >
    >> Tim Streater wrote:
    >>> I have an element that I would like to be centred on the page, so I use:
    >>>
    >>> margin-left: auto;
    >>> margin-right: auto;
    >>>
    >>> This is fine but under some conditions the element then expands to fill
    >>> the whole width of the window (variable content).
    >>>
    >>> I would like to restrict its expansion to within (say) a few pixels of
    >>> the sides of the window. Can I do this with CSS?

    >>
    >> width: 99%;

    >
    > This appears to *force* the element (a table) to occupy 99% of the
    > width. I want to *limit* it to that.


    max-width:99%;

    (does not work in IE6)

    > I have:
    >
    > table.outerbox
    > {
    > margin-left: auto;
    > margin-right: auto;
    > margin-top: 20px;
    > border-width: 4px;
    > border-color: black;
    > border-style: solid;
    > }
    >
    > and then:
    >
    > <table class="outerbox">
    > rows, cols
    > </table>


    You could always wrap it inside a div, and give the div a left and
    right padding.


    --
    Els http://locusmeus.com/
    Els, Nov 15, 2007
    #4
  5. Tim Streater

    Tim Streater Guest

    In article <967o70kru1lu.r0wadg43noa4$>,
    Els <> wrote:

    > Tim Streater wrote:
    >
    > > In article <a9ed4$473c781e$40cba7a7$>,
    > > "Jonathan N. Little" <> wrote:
    > >
    > >> Tim Streater wrote:
    > >>> I have an element that I would like to be centred on the page, so I use:
    > >>>
    > >>> margin-left: auto;
    > >>> margin-right: auto;
    > >>>
    > >>> This is fine but under some conditions the element then expands to fill
    > >>> the whole width of the window (variable content).
    > >>>
    > >>> I would like to restrict its expansion to within (say) a few pixels of
    > >>> the sides of the window. Can I do this with CSS?
    > >>
    > >> width: 99%;

    > >
    > > This appears to *force* the element (a table) to occupy 99% of the
    > > width. I want to *limit* it to that.

    >
    > max-width:99%;
    >
    > (does not work in IE6)


    Didn't work in Safari 3, FF Mac/Win either :)
    >
    > > I have:
    > >
    > > table.outerbox
    > > {
    > > margin-left: auto;
    > > margin-right: auto;
    > > margin-top: 20px;
    > > border-width: 4px;
    > > border-color: black;
    > > border-style: solid;
    > > }
    > >
    > > and then:
    > >
    > > <table class="outerbox">
    > > rows, cols
    > > </table>

    >
    > You could always wrap it inside a div, and give the div a left and
    > right padding.


    Bit of a hack, but this *did* work. Thanks.
    Tim Streater, Nov 15, 2007
    #5
    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. Sharon Lee
    Replies:
    2
    Views:
    387
    Sharon Lee
    Dec 31, 2003
  2. linkswanted
    Replies:
    1
    Views:
    904
  3. Cal Who
    Replies:
    1
    Views:
    428
    Alexey Smirnov
    May 16, 2010
  4. Cal Who
    Replies:
    4
    Views:
    574
    Cal Who
    May 17, 2010
  5. Saraswati lakki
    Replies:
    0
    Views:
    1,323
    Saraswati lakki
    Jan 6, 2012
Loading...

Share This Page