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

[leehughes]

Hi,

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

https://css-tricks.com/the-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

Code:

To Chris's code

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

Code:

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

Can I just Chris's code

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 :(

Thanks

[TheDoc]

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.

[leehughes]

Ok

thanks for the tip :d

[Author]

Posts