Treehouse: Grow your CSS skills. Land your dream job.

Advice on editing my site to Chris’s perfect fluid width

  • # September 10, 2009 at 1:14 pm


    After being given some advice on another thread to sort out the width of my page I research into Chris’s perfect fluid width layout..

    I would just like to layout what am going to attempt to do and see if it makes sense to anyone. If I get into errors then I would most likely struggle to get out of them.

    Using the code provided from Chris’s example

    Do I change my code


    < ![endif]-->

    To Chris's code

    #page-wrap {
    width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");

    The obvious difference is the dimensions and the #page-wrap and #outer..

    I have just realised that this #outer was carried over from old code. I think this is now called #container

    Can I just change the names around?

    So my code for my current site is

    #container {
    width: 1150px;
    margin-right: auto;
    margin-left: auto;

    Can I just Chris's code

    #page-wrap {
    background: white;
    min-width: 780px;
    max-width: 1260px;
    margin: 10px auto;
    #page-wrap #inside {
    margin: 10px 10px 0px 10px;
    padding-top: 10px;
    padding-bottom: 10px;

    and change the name from page-wrap to container?

    Will this give me the results am after?

    Am guessing it's going to be more complicated that that though :(


    # September 10, 2009 at 1:42 pm

    If you’re just starting out, a fluid site can be extremely difficult to master. Chris is providing you with something to use, but unless you are very comfortable with CSS, you should stray from the CSS he’s provided.

    In my opinion, there’s nothing wrong with fixed-width sites, I actually prefer them as a web user.

    Also, with that huge image banner you have across the top of your site, there’s no point in having a fluid layout since that will have to be fixed width anyways, and since it’s the focal point of that front page, I don’t see the need of having the rest of the site fluid.

    # September 10, 2009 at 1:52 pm


    thanks for the tip :d

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.