SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2004
    0 Post(s)
    0 Thread(s)

    Question Fluid Column Design Using CSS without tables

    Thanks to Cameron and Paul for replying to my thread posted yesterday.
    Paul has some good examples out there with the link he provides. My requirement is to design a site using CSS without tables. That uses a screen resolution of 800 X 600 as the basic but would allow visitors with 1024 X 768 or 1152 X 864, 1280 X1024, 1600 X 1200 resolutions. To be able to view the pages without much degradation. Any ideas regarding a design of this nature? e.g. how much should the image sizes should be?
    Last edited by Tech_Eng; Feb 11, 2004 at 14:49.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    There are a lot of things to consider so a straight-forward answer is not really possible.

    I would still design the layout using percentages in some major element to allow the screen to resize up or down.

    If you want 800x600 as your main layout then design it so that it looks how you like in 800x600 with positioning where you want etc. If the parent element is fluid then the content should move to accomodate the higher resolutions.

    Obviously the layout will look different because the screen is different. Unless you code every element in percentages including your images (which would look horrible) the page will always look a bit different depending on the screen size.

    You can fix some elements in position to keep the look the same but if you have one fluid column then it will account for the different screen sizes.

    As an example I converted this site for a friend (who has now passed away unfortunately) into css no tables and it uses one fixed column and one fluid column:

    As you can see the page is viewable in all resolutions and the content accomodates this. It uses one fixed column for navigation and a fluid column for content.

    This is the type of layout that css is good at and is the way I would recommend designing to. Trying to fix everything in place is not really suitable for a medium such as the web.

    The image sizes used really depend on the type of layout you go for and how they are positioned. If they are in floated elements they may cause content to drop below etc.

    I think the best thing to do is to practice a few basic layouts and then you cam decide which is the best approach for you.

    I'm sorry I can't give an easy answer to this and a lot of people will have different opinions on this.



    BTW please don't double post as it does tend to annoy and confuse people. . Please keep relavent questions in the same thread and you will get better results.


Posting Permissions

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