How do i change the size of the different parts of the layout

Question

Im using the following layout: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

This is working exacly like it it should and i expected it to work, but im unable to change the size of the right bar and left "bar" ( I want to make them both smaler ). I have been trying to change values in hopes of understanding but CSS is still magic to me.

Could someone tell me what value actualy controls this? Would also be great if someone could explain why changing XX will actualy change the size.

Answer 1

If you want to change the size of an element you have to manipulate its child elements also. If there is no child control then you can use the width and height attributes to control the size of the element.

For more details please read this

Visual formatting model details

Answer 2

I would suggest that you implement another CSS framework. The one you are using seems very hard to modify.

I'd suggest you take a look at this article which mentions some widely used frameworks, who's CSS is - in my opinion - a lot easier to understand and implement.

I've heard a lot of good about the Blueprint framework. Here's a list of websites which uses Blueprint.

Update:

Take a look at their 3-column layout tutorial.

Also: here's a great - more general - tutorial over at net tuts+.

Answer 3

CSS is a very powerful design system. However it has its own way of doing things and is NOT very intuitive to the newcomer.

The good news is that the learning curve is not too steep.

With some dedication you can go a long way in a few days or a week or two.

Your question asks for a quick understanding of changing some elements' sizes but I think that's the wrong way to go about it.

Instead you should ask about getting the foundations and basics of CSS so you can learn them. Applying that to any framework in the future will be the easy part.

Answer 4

The example roosteronacid provided worked fine, and did work in Visual studio. But it used locked sizes, you would have to target a certain resolution. I personaly hate when that happens, nothing more annoying then a web site using 25% of my screen ( Its very posible thats i could have used that framework to do what i wanted, but i do not have the skills for that ).

I found another solution here that both worked, and scales to my wishes (Works on old browsers aswell).