SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Max-width and max-height constants?

    Does anyone know of any max-width & max-height constants for CSS as in a "general rule-of-thumb" to use?

    For instance: everyone is basically familiar with the "design-by-0" method of development (referring to the margin:0, padding:0 declarations at the beginning of almost all stylesheets...).

    Is there anything like this sort for a wrapper div or body?

    Thanks,

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There is no general rule of thumb to use I don't think. A lot of websites have fixed widths of 800px (catering for people with 800x600 screens) but that's not so nice for people with very big screens. The best thing is to simply have a liquid layout, i.e. one that stretches with the screen. Max height is less relevant because everyone is used to scrolling vertically, it's scrolling sideways that's a pain in the ****.

    I think more relevant is to have a min-width. If you resize a browser window down to a very small size in a liquid layout, elements can start overlapping each other or becoming difficult or impossible to read, which is when min-width can be useful. Sure, it means at some point the user has to start scrolling sideways, but it's better than looking at a layout that has got into a mess because the window is simply too thin.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Minimum width depends on your content. The more columns you have, the larger the minimum width needs to be.

    Maximum width should ensure that lines of text don't become too long. How long is too long? That depends on things like the font and the leading (line height). A good rule-of-thumb that I use is a maximum width of 35em at a line height of 1.5. That's for the widest column, not for the entire page.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem I'm running into is making the head (which is absolutely positioned) be at the top of the page while having everything at a fixed position (no scroll-bars regardless for an 800x600 res) while maintaining fluidity.

    I'll try to post some sort of image of what it is I'm talking about soon...

  5. #5
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the design I'm trying to make: http://www.indstate.edu/sts/test/crn/prop1.jpg

    I thought about breaking it up like this:

    Code:
    <div id="w">
     <div id="cL">
      <div id="c"></div>
      <div id="l"></div>
     </div><!--/cL-->
     <div id="cR">
      <div id="r"></div>
     </div><!--/cr-->
     <div id="f"></div>
     <div id="h"></div>
    </div><!--/w-->
    ...I was going to make the "cL" float left, "cR" float right, and have the "h" be positioned absolutely in concordance to "w" being position:relative so that the "h" will have something to anchor to.

    The problem I keep running into with this design is:

    1.) Positioning it both vertically and horizontally centered...
    2.) Making the design STICK to where it is (centered x & y axis) on the screen while allowing a fluid design by allowing the overall page to be resized (the center content area will be display:auto...
    3.) Doing all of this while having a three-column layout as well as keeping content first...

    I KNOW THIS CAN BE DONE, but what is it that I'm doing wrong? I've got it to a point now to where the "h" is basically centered in the above parameters, but I'm struggling with getting everything sized right (should I use px for the borders or em?).

    Any input is very appreciative.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •