We started building a form generator with a drag and drop interface and hit the often mentioned "float versus absolute" discussions. I've invented a different approach that has the flexibility of absolute positioning without the negative side effects but need some advice on some specific issues and look forward to your comments.
What is our goal? We want to provide the user with a canvas with lines in it to position form elements through a drag and drop interface. Form elements need to be aligned some way irrespective of the width of the form elements to the left or right to make for attractive and usable forms. If we do this the 'floated' way we give every element in one line a "float: left" and some "margin-left: xyz" to get it aligned properly. But this way the amount of margin-left is dependent on the width of the preceding element. Hence, after every adjustment all the margins will have to be recalculated. Not very nice. Besides that, floats are quite cumbersome when the content grows larger than the containing element as, amongst others, Shaun Inman pointed out: http://www.shauninman.com/archive/2006/05/22/clearance_position_inline_absolute. If we do this the 'absolute' way we give every element "position: absolute" and some amount of "top: xyz" and "left: xyz". But absolutely positioned elements have no height, hence the lines collapse and do not adjust to the height of the content inside a form element (which for example could be an ul with many li's inside that need to be displayed vertically). A different approach After fiddling around for some time I concluded we had to abandon absolute positioning at all since this way elements are removed from the normal flow altogether. So the trick was to find some way to start calculating the margin-left from a fixed position, not from the right of the element sitting left. I've managed this with a combination of "position: relative" + "left: 100%" and using negative margins instead of positive. Every form element has an extra content div to prevent the redraw bug in IE6. You can see a fixed-width example at http://www.solide-ict.nl/sitesdir/solidedrupal/formbuilder.html and a liquid example at http://www.solide-ict.nl/sitesdir/solidedrupal/formbuilder-liquid.html. I've called my blog 'simulated absolute positioning' but is only in Dutch yet :-(. No hacks but some issues remain Our CSS requires no hacks to work with all modern browsers (Safari, Opera, Firefox, IE7) and IE6. It does not work in IE Mac 5 but since this product is deprecated this is not on our priority list. The approach seems very stable, since elements grow vertically if necessary and the layout does not break when for example a background image is larger then the element itself. It is valid and does not influence the element order in html. However, IE6 has a problem rendering this CSS when the size of the viewport is changed. After a refresh everything aligns OK so I think this has nothing to do with hasLayout issues. I suspect some form of quirky percentages (see http://www.positioniseverything.net/explorer/percentages.html) is hindering this approach in IE6 (at least). Another issue is the layout breaks when an element is larger than the canvas. It would be better if the elements would stick out of the canvas. I am quite enthusiastic about this approach and see many opportunities for it. I did some research but haven't seen it posted elsewhere. I would welcome your feedback, testing in other browsers and especially suggestions to overcome the rendering issues in IE6. Anyway, thank you for your attention. Eric Sol, [EMAIL PROTECTED] ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
