margin: auto - but only up to a point

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 [ Do, 15 November 2007 16:23 ] [ ID #1871994 ]

Re: margin: auto - but only up to a point

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
lws4art [ Do, 15 November 2007 17:47 ] [ ID #1872002 ]

Re: margin: auto - but only up to a point

In article <a9ed4$473c781e$40cba7a7$8194 [at] NAXS.COM>,
"Jonathan N. Little" <lws4art [at] centralva.net> 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 [ Do, 15 November 2007 18:12 ] [ ID #1872010 ]

Re: margin: auto - but only up to a point

Tim Streater wrote:

> In article <a9ed4$473c781e$40cba7a7$8194 [at] NAXS.COM>,
> "Jonathan N. Little" <lws4art [at] centralva.net> 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 [ Do, 15 November 2007 18:24 ] [ ID #1872013 ]

Re: margin: auto - but only up to a point

In article <967o70kru1lu.r0wadg43noa4$.dlg [at] 40tude.net>,
Els <els.aNOSPAM [at] tiscali.nl> wrote:

> Tim Streater wrote:
>
> > In article <a9ed4$473c781e$40cba7a7$8194 [at] NAXS.COM>,
> > "Jonathan N. Little" <lws4art [at] centralva.net> 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 [ Do, 15 November 2007 19:02 ] [ ID #1872016 ]
Miscellaneous » alt.html » margin: auto - but only up to a point

Vorheriges Thema: Examples of Websites and Graphic Art created by Children
Nächstes Thema: Re: Apologies to Chaddy