CSS - Changing total width

I have a Blogger template which is wider than the screen-width and causes the horizontal scrollbar to be displayed. I want to change it so that it fits and no scrollbar is shown. But the problem is I don't know what is causing this. I have downloaded the template file and in my code editor looked for all width properties and changed all 100%s to 90% and pix width values to value-100, but still the page is as before.

In finding the effective rule/rules in a such cases, what else should I look for/do? What is a comprehensive procedure to check things to find t开发者_如何学运维he rules?

---

Instead of changing the width, try adding the CSS property overflow: hidden to everything you think might be causing the issue and then remove them one-by-one until the scroll bar reappears and you'll have the culprit. You might need to add it to html and body as well. If the scrollbars aren't revealing any actual content, you can leave the overflow: hidden on the culprit to resolve the issue.

---

It might not be a width property that's causing the problem - there might be a block element inside your template that doesn't wrap or float that might be stretching out your container if the widths of the containers are defined using percentages.

Define the root container using a fixed width and this should eliminate many of those sorts of issues. Try that first and let us know if it works.

---

Procedure:

1). Understand the box model and how this varies on IE. It is just as likely that a problem "width" may actually be caused by padding, margin, or even border as width.

2). Check the rendering in other browsers. If you can reproduce the problem in FF get Firebug and use that to find out the calculated dimensions of the element in question, and tunnel down through it's children which may well be causing the issue. Chrome has a similar debugger to Firebug iirc, but I'm not familiar with it.

3). If that doesn't tell you what the problem is, start removing rules or whole patterns from your CSS until the problem goes away (or remove everything and add it back in piecemeal until the problem returns) - at that point you know what is causing the issue, if not why, and you can always update the question to ask us why when you've identified it.

hth

(Apols if any of this was already obvious)

---

Well, % always begins with "100". See the percentage of width of body tag is set to 100%. then according to it, just set other component % as per the requirement in your display.

Personally I do believe that, use of % is better then 'px'. If you know CSS, then try to change 'px' to % as per the requirement.

---

It seems that the component has min-width style and overflow property set to auto. You may want to set it to visible and do it in FireBug Firefox Page Inspector first, to see the effect alive before making post edit. If you just want to adjust the whole post width, blogger has standard interface. You can also edit the template manually