Is there a CSS way to place an HTML element vertically following a golden ratio?

Question

I want to place an HTML element in the horizontal middle and vertical gold using CSS. The element height must be absolutely flexible, so I can’t just set the top-attribute and element-height values ​​to a percentage value. Is there any way to do this?

Schematic representation:

In the image, arrows of the same color have a golden ratio to each other (38.2%: 61.8%). The dashed line is only imaginary.

Answer 1

I believe that math works like this (vertical centering was discussed here):

See Fiddle (thanks Daniel for that)

CSS

 div { position: absolute; /* or fixed */ top: 23.6%; /* height is 100% of viewport * 38.2% (blue) * 61.8% (red) */ bottom: 38.2%; /* height is 100% of viewport * 61.8% (blue) * 61.8% (red) */ } 

This should bring your attitude right for green. Height is flexible for viewport size.

EDIT: Further clarification. Note that the blue arrows begin by dividing 100% of the height by 38.2 and 61.8. The red up arrow will be 61.8 of the upper blue section (38.2), hence 23.6. The red arrow below will be 61.8 of the lower blue section (61.8), hence 38.2. Now double check: 23.6 + 38.2 = 61.8 (i.e. the total distance of the two red arrows added together). Thus, their ratio is 23.6 / 61.8 = 38.2% and 38.2 / 61.8 = 61.8% (the red arrows correspond to your gold ratio). Green - 100 - 61.8 (red arrow is) = 38.2 (total green area). The upper green arrow is 38.2 (upper blue) - 23.6 (upper red) = 14.6. The lower green region is 61.8 (lower blue) - 38.2 (lower red) = 23.6 (lower green). Let me check the green diet: 14.6 / 38.2 = 38.2% and 23.6 / 38.2 = 61.8% (the green arrows correspond to your gold ratio). Here's a golden version of the html / css addict of your image (I know your photo was for illustration, but it was fun):

HTML

 <div class="golden"></div> <div class="dotted"></div> <div class="blue top arrow"></div> <div class="blue bottom arrow"></div> <div class="red top arrow"></div> <div class="red bottom arrow"></div> <div class="green top arrow"></div> <div class="green bottom arrow"></div> 

CSS

 html { background-color: #000; width: 100%; height: 100%; } body { background-color: #fff; width: 38.2%; height: 100%; margin: 0 30.9%; position: relative; } .golden { position: absolute; top: 23.6%; bottom: 38.2%; width: 38.2%; background-color: #ddd; left: 50%; margin-left: -19.1%; } .dotted { position: absolute; top: 38.2%; height: 0; width: 100%; border-top: 1px dotted #444; } .blue { position: absolute; right: 14.6%; width: 2px; background-color: #00f; } .blue.top { height: 38.2%; top: 0; } .blue.bottom { height: 61.8%; bottom: 0; } .red { position: absolute; right: 38.2%; width: 2px; background-color: #f00; } .red.top { height: 23.6%; top: 0; } .red.bottom { height: 38.2%; bottom: 0; } .green { position: absolute; right: 50%; width: 2px; background-color: #83f92c; border-color: #83f92c; } .green.top { height: 14.6%; top: 23.6%; } .green.bottom { height: 23.6%; bottom: 38.2%; } .arrow:before, .arrow:after { content: ''; position: absolute; display: block; left: 0; width: 0; height: 0; margin-left: -6px; border-right: 7px solid transparent; border-left: 7px solid transparent; } .arrow:before {top: 0;} .arrow:after {bottom: 0;} .blue:before {border-bottom: 10px solid #00f;} .red:before {border-bottom: 10px solid #f00;} .green:before {border-bottom: 10px solid #83f92c;} .blue:after {border-top: 10px solid #00f;} .red:after {border-top: 10px solid #f00;} .green:after {border-top: 10px solid #83f92c;} 

EDIT 11-10-11: Based on commentator commentary that my first interpretation above was incorrect. I suggest that my solution will still work if the white area is a content container that controls the height (in case this is useful to everyone). In this case, do the following:

HTML

 <div class="content"> ...place some arbitrary length content here... [copy above HTML here] </div> 

CSS - first remove the html and body CSS from above. Then add:

 .content { position: relative; /* this is the only vital point, you can also style it similar to the body css in the first version above, minus the height */ } 

Answer 2

Ok, I tested this and it seems to work. However, the trick requires the two div , inner and dummy have exactly the same content. dummy used to give the outer div an appropriate height so that the inner div can be placed a percentage of that height. A bit hacky but not javascript.

http://jsfiddle.net/fVQeC/4/

 <div class="outer"> <div class="inner"> Something<br>too<br>more<br>more<br>more<br>more </div> <div class="dummy"> Something<br>too<br>more<br>more<br>more<br>more </div> </div> 

---

 .outer{ position: absolute; top: 38.2%; } .inner{ width: 200px; background-color: blue; position: absolute; top: -38.2%; } .dummy{ width: 200px; visibility: hidden; }