margin: auto - but only up to a point

margin: auto - but only up to a point

am 15.11.2007 16:23:07 von Tim Streater

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,

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

am 15.11.2007 17:47:26 von lws4art

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

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

am 15.11.2007 18:12:19 von Tim Streater

In article ,
"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:


rows, cols


Thx - tim

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

am 15.11.2007 18:24:55 von Els

Tim Streater wrote:

> In article ,
> "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:
>
>


> rows, cols
>


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


--
Els http://locusmeus.com/

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

am 15.11.2007 19:02:43 von Tim Streater

In article <967o70kru1lu.r0wadg43noa4$.dlg@40tude.net>,
Els wrote:

> Tim Streater wrote:
>
> > In article ,
> > "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:
> >
> >


> > rows, cols
> >

>
> 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.