24th September 2008, 15:38
CSS relative positioning: deep in the div positioning (browsers behavior)
With some browsers (like opera, firefox, explorer, chrome but unfortunately, still no one test on browsers for unix-linux OS as the power unit of the Pc linux based have leave me on the way, just in these last days) i see the importance of borders width, that make fail with the correct vertical position for elements:
going to positioning certain two div elements with position:relative and display:block, one of these maybe result to go down in the page, without apparently reason.
You give a space (as example) for each of 50% and 50%, you will see browsers putting the second one of these two div below the other, while it should be displayed in the same horizontal line: seem browsers calculate in some way also the border pixels width, that will be added to the total space amount, so with a border of 1px, maybe, still the result will be as needed, but increasing the border width for div elements, it will go to put one of these two div where the other finish. In this scenario the best way seem to be that to choose pixels for elements dimension; if you choose the % (percent) values than you need to consider something more about your elements contents and dimension.
I discover it after many troubles while coding a new skin for Zikula (and hope the scenario described is clear).
Do you know more about this explorer (or others browser) behavior?
Borders should be ever considered in the width sum? As logic and as CSS rule i think no. Something wrong on this analysis?