table max width but can shrink

Discussion in 'HTML' started by Paul Furman, Feb 3, 2004.

  1. Paul Furman

    Paul Furman Guest

    Is there a way to make a page not span out over a large screen leaving
    whitespace beyond 700 pixels but if resized, it will still shrink...
    maybe stopping at a minimum width too.

    Assuming the page is contained in a table but maybe a way with css
    though I want this to package the whole site so it shouldn't be
    unpredictable in a harmful way.
     
    Paul Furman, Feb 3, 2004
    #1
    1. Advertising

  2. Paul Furman

    Mark Parnell Guest

    On Mon, 02 Feb 2004 21:00:21 -0800, Paul Furman <>
    declared in alt.html:

    > Is there a way to make a page not span out over a large screen leaving
    > whitespace beyond 700 pixels but if resized, it will still shrink...
    > maybe stopping at a minimum width too.


    What if I want it to go beyond 700px? If I only want it to be 700px wide
    then I will adjust my browser accordingly. In fact, I already will have.

    http://www.allmyfaqs.com/faq.pl?AnySizeDesign

    >
    > Assuming the page is contained in a table


    http://www.allmyfaqs.com/faq.pl?Tableless_layouts

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Feb 3, 2004
    #2
    1. Advertising

  3. Paul Furman

    Paul Furman Guest

    Mark Parnell wrote:
    > On Mon, 02 Feb 2004 21:00:21 -0800, Paul Furman <>
    > declared in alt.html:
    >
    >
    >>Is there a way to make a page not span out over a large screen leaving
    >>whitespace beyond 700 pixels but if resized, it will still shrink...
    >>maybe stopping at a minimum width too.

    >
    >
    > What if I want it to go beyond 700px? If I only want it to be 700px wide
    > then I will adjust my browser accordingly. In fact, I already will have.
    >
    > http://www.allmyfaqs.com/faq.pl?AnySizeDesign



    It just is hard to read when it stretches out too far on a big screen. I
    don't want anyone to see that because it's just wrong and illegible. I
    like the look with some space around the edges also but it's not
    necessary for smaller screens. Likewise some layouts look silly squished
    to an inch wide.


    >
    >
    >>Assuming the page is contained in a table

    >
    >
    > http://www.allmyfaqs.com/faq.pl?Tableless_layouts



    I'm familar with the argument against tables and am on the fence <g>.


    Is it possible to accomplish what I want with CSS?
     
    Paul Furman, Feb 4, 2004
    #3
  4. Paul Furman

    Mark Parnell Guest

    On Tue, 03 Feb 2004 16:47:50 -0800, Paul Furman <>
    declared in alt.html:
    >
    > It just is hard to read when it stretches out too far on a big screen.


    Then don't make your browser window that wide.

    >
    > Is it possible to accomplish what I want with CSS?


    Yes.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Feb 4, 2004
    #4
  5. > Is there a way to make a page not span out over a large screen leaving
    whitespace beyond 700 pixels but if resized, it will still shrink... maybe
    stopping at a minimum width too.
    >
    > Assuming the page is contained in a table but maybe a way with css though

    I want this to package the whole site so it shouldn't be unpredictable in a
    harmful way.

    This page has some good info for using CSS to do just this:

    http://www.svendtofte.com/code/max_width_in_ie/

    as IE a problem child in dealing with the max-width tag.

    Ethan
    --
    Datarealm Internet Services, Inc.
    Shared Hosting: http://www.serve.com
    Dedicated Hosting: http://www.rackmounted.com
     
    Ethan Schlenker, Feb 4, 2004
    #5
  6. Paul Furman

    Paul Furman Guest

    Ethan Schlenker wrote:
    >
    > This page has some good info for using CSS to do just this:
    >
    > http://www.svendtofte.com/code/max_width_in_ie/
    >
    > as IE a problem child in dealing with the max-width tag.



    Excellent thanks. They say studies suggest 60 characters per
    line is ideal, less for children. The page looks like about
    100 characters though <g>.

    Here's the basic css tag (which doesn't work in IE):

    <p style="min-width: 25em; max-width:33em;">
    [alot of text goes here]
    </p>

    http://www.maxdesign.com.au/presentation/em/flexible.htm

    Ah, now I see why em's are a useful unit! Lets you set the
    width according to the size of the letters, no matter what
    font settings the user chooses. An em is the size of a capital
    letter 'M' or the same as the point size: "For example, in
    12-point type, an em is a distance of 12 points"

    Something like 420 pixels is optimal for a standard browser
    with 14-16px fonts but you never know what people do to
    their settings.

    The link above uses a tricky MS java script kind of way of
    replicating this effect in IE with the expression() property:

    <html>
    <style>
    p {
    border:1px solid red;
    max-width:30em;
    min-width: 15em;
    width:expression(
    document.body.clientWidth > (500/12) *
    parseInt(document.body.currentStyle.fontSize)?
    "30em":
    "auto" );
    }
    </style>
    <body>
    <p>
    [alot of text]
    </p>
    </body>
    </html>


    I added the line
    min-width: 15em;
    or else it won't shrink in mozilla, which was my original question. I
    assume this will work with tables also.

    here it is without that line:
    http://www.svendtofte.com/code/max_width_in_ie/max_width_final.html


    OK, now I've played around with this on my own and the problem is that I
    want to left adjust a paragraph but center the block. I've got the css
    setting this up for a <div>. Basic question but is there a wrapper I can
    put around the whole thing to center it (besides a table <g>)? I did it
    with a table here:http://www.edgehill.net/html/css/max-min-width.htm
    but now it's got something funny in Mozilla where it won't make a scroll
    bar if I shrink my window down tiny. Sheesh, it's always something. I
    just learned I can take the formatting out of the table and it works the
    same, simply having the table as a container allows that to be centered
    and the div inside sets the width.
     
    Paul Furman, Feb 4, 2004
    #6
  7. Paul Furman

    Mark Parnell Guest

    Mark Parnell, Feb 4, 2004
    #7
  8. Paul Furman

    Paul Furman Guest

    Mark Parnell wrote:

    > On Tue, 03 Feb 2004 21:58:10 -0800, Paul Furman <>
    > declared in alt.html:
    >
    >
    >>Basic question but is there a wrapper I can put around the whole thing
    >>to center it

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


    Ah, that makes sense, the difference between

    margin-left: auto;
    margin-right: auto;
    (which centers the container)

    and

    text-align: center;
    (which centers the contents)

    but it doesn't seem to work with the max-width; min-width scenario.
    Everything still slams over to the left edge unless I use a table to get
    the content in the middle of the page. Tables protect the inside content
    from <center> so that works well, just the odd behavior of no scroll bar
    in Mozilla on my sample page:
    http://www.edgehill.net/html/css/max-min-width.htm
    PS again, I can remove the css for the table and it still works, I just
    didn't want to upload again. The max-min have to be applied to the
    inside <div> and the table follows that size.

    <center>
    <table>
    <tr>
    <td>
    <div style="
    max-width:30em;
    min-width: 20em;
    width:expression(
    document.body.clientWidth > (500/12) *
    parseInt(document.body.currentStyle.fontSize)?
    "30em":
    "auto" );
    ">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    sed diam nonummy nibh euismod tincidunt ut laoreet dolore
    magna aliquam erat volutpat.
    </div>
    </td>
    </tr>
    </table>
    </center>

    PPS the code simplification above is broken but explains the intent.
     
    Paul Furman, Feb 4, 2004
    #8
  9. Paul Furman

    Paul Furman Guest

    My conclusion is that max-width just doesn't work. I tried a few
    different versions:
    http://www.edgehill.net/html/css/max-min-width.htm
    http://www.edgehill.net/html/css/max-min-width2.htm
    http://www.edgehill.net/html/css/max-min-width3.htm
    and they break in various ways depending on the browser.

    Mozilla lets it shrink a little bit but fails to add scroll bars at some
    point. You might argue that point is ridiculously small but it's
    completely off-page at that point which is pretty bad.

    I did get the
    > margin-left: auto;
    > margin-right: auto;
    > vs
    > text-align: center;

    to work but it doesn't help.

    Paul Furman wrote:
    > Mark Parnell wrote:
    >
    >> On Tue, 03 Feb 2004 21:58:10 -0800, Paul Furman <>
    >> declared in alt.html:
    >>
    >>
    >>> Basic question but is there a wrapper I can put around the whole thing
    >>> to center it

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

    >
    >
    > Ah, that makes sense, the difference between
    >
    > margin-left: auto;
    > margin-right: auto;
    > (which centers the container)
    >
    > and
    >
    > text-align: center;
    > (which centers the contents)
    >
    > but it doesn't seem to work with the max-width; min-width scenario.
    > Everything still slams over to the left edge unless I use a table to get
    > the content in the middle of the page. Tables protect the inside content
    > from <center> so that works well, just the odd behavior of no scroll bar
    > in Mozilla on my sample page:
    > http://www.edgehill.net/html/css/max-min-width.htm
    > PS again, I can remove the css for the table and it still works, I just
    > didn't want to upload again. The max-min have to be applied to the
    > inside <div> and the table follows that size.
    >
    > <center>
    > <table>
    > <tr>
    > <td>
    > <div style="
    > max-width:30em;
    > min-width: 20em;
    > width:expression(
    > document.body.clientWidth > (500/12) *
    > parseInt(document.body.currentStyle.fontSize)?
    > "30em":
    > "auto" );
    > ">
    > Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    > sed diam nonummy nibh euismod tincidunt ut laoreet dolore
    > magna aliquam erat volutpat.
    > </div>
    > </td>
    > </tr>
    > </table>
    > </center>
    >
    > PPS the code simplification above is broken but explains the intent.
    >
     
    Paul Furman, Feb 4, 2004
    #9
    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. Paul Furman

    min-width max-width again

    Paul Furman, Feb 9, 2004, in forum: HTML
    Replies:
    10
    Views:
    710
    Beauregard T. Shagnasty
    Feb 9, 2004
  2. HoustonFreeways

    Table/Div: want max width but no minimum

    HoustonFreeways, Apr 6, 2004, in forum: HTML
    Replies:
    6
    Views:
    30,591
    Weyoun the gowd damn Dominion Vorta who certainly
    Apr 6, 2004
  3. Lois
    Replies:
    1
    Views:
    3,245
    Ryan Stewart
    Dec 27, 2004
  4. Summercool
    Replies:
    9
    Views:
    888
    dorayme
    Oct 23, 2007
  5. kriton
    Replies:
    0
    Views:
    342
    kriton
    Apr 22, 2005
Loading...

Share This Page