So let’s see some way we can use it in our layout.
At first we must begin with our basic containers. In a simple example we can apply the analogy into the only divided container is the content (main and sidebar). Because we cannot play with the height of these elements, we have to focus only in the width.
Let’s say for example that our page width is 960 pixels and we want to divide this using the golden ratio. Our main-content will be 960 / 1.62 = 593 pixels and our sidebar 960 - 593 = 367 pixels.
Now that we found the analogy of our basic columns, it’s time for the basic typography. My proposal for some relationships:
Having this logic in mind we can solve any sizes or analogies problem that comes along.
Another example is inside the form elements, where the input width = label width * 1.62
The same ratio can be present in any rectangle which we want to be “perfect”. Its width = height * 1.62
Many people will argue, that this technic is an utopia and we cannot spend time coding next to our calculator, when we try to catch up our deadlines, but that’s NOT the point of this article.
The point is to try thinking of the 62% 38% analogy for everything we need to divide.
When we want to divide a quantity into three parts, we divide it firstly in two (62% - 38%) parts and then we take the bigger and divide it into two parts again with the same analogy.
source: http://cssglobe.com/post/3117/golden-ratio-in-modern-css