Write a completely fluid HTML page (using '%' instead of 'px' for EVERY element height/width)
- by barak manos
I am designing my HTML pages to be completely fluid:
For every element in the mark-up (HTML), I am using 'style="height:%;width:%"' (instead of 'style="height:*px;width:*px"').
This approach seems to work pretty well, except for when changing the window measurements, in which case, the web page elements change their position and end up "on top of each other".
I have come up with a pretty good run-time (java-script) solution to that:
var elements = document.getElementsByTagName("*");
for (var i=0; i < elements.length; i++)
{
if (elements[i].style.height) elements[i].style.height = elements[i].offsetHeight+"px";
if (elements[i].style.width ) elements[i].style.width = elements[i].offsetWidth +"px";
}
The only problem remaining is, that if the user opens up the website by entering the URL into a non-maximized window, then the page fits that portion of the window.
Then, when maximizing the window, the page remains in its previous measurements.
So in essence, I have solved the initial problem (when changing the window measurements), but only when the window is initially in its maximum size.
Any ideas on how to tackle this problem? (given that I would like to keep my "% page-design" as is).
