I’m very intrigued by this approach, and so far testing it against various browsers has worked fine… except for one IE6 (?) glitch: when using a two-column layout with Faux Absolute Positioning, and IE6 is running on a Virtual PC, the left column frequently (but not always) gets displayed to the far right. For more info see: “Anyone seen image positioning problems with IE6 running on a Virtual PC?” on MSDN IE Web Dev forum…
Nice article, and nice techniques. I haven’t sen this approach before, and I will try it out.
I’ve been wondering similar things when it comes to multi-column layouts, and I have an idea that I’ve been using that I’d lke to run past you, or anyone else.
I’ve been using <span> elements with the CSS display: inline-block. In combination with the vertical-align: top; property, I can achieve something very much like two or three table cells sitting next to eachother in a row, since they are sitting on the same text baseline (inline) but can take width properties (block). It’s a nice combination of the two.
The problem is, if you stick a DIV inside of these spans, the layout will not validate. Since Spans are default inline, is it not allowed to insert a block-level div inside of them. The reason why I use Spans in the first place is that as early as v5, inline-block is supported in IE only on elements that are by default inline. So, spans, anchors, img tags, etc… can be inline-block, but DIVs can not.
So, the question is, while this is a powerful layout tool, is it off limits since it technically is not allowed? Will the inline-block property eventually go the way of the dodo and cease to be supported?
Copy & paste the code below to embed this comment.
achilehero
Hi Eric!
I have stumbled upon this technique while looking for a solution to my problem. I am still not sure if/how I can use it. I think you may have had the same issue. The users have a “screen designer” for a form layout. I need to replicate that in the browser. Now it’s done with absolute positioning, and the problem is that the footer, which comes right after the form’s content, now gets placed to the top because of absolutely positioned elements in the form that don’t provide the form with a height. Can I move the footer in it’s place by still positioning the elements inside the form in the same positions the user did? If so, how. I seem to not getting exactly the point.
Thanks!
125 Reader Comments
Back to the ArticleDadCat
I’m very intrigued by this approach, and so far testing it against various browsers has worked fine… except for one IE6 (?) glitch: when using a two-column layout with Faux Absolute Positioning, and IE6 is running on a Virtual PC, the left column frequently (but not always) gets displayed to the far right. For more info see: “Anyone seen image positioning problems with IE6 running on a Virtual PC?” on MSDN IE Web Dev forum…
DadCat
My IE6 layout problem had already been reported (although apparently not yet completely resolved). I must have accidentally jumped past those posts…
But knowing that it’s aggravated when running under VPC may shed some light on how someone (smarter than me) might come up with the best work-around.
Highchair
Nice article, and nice techniques. I haven’t sen this approach before, and I will try it out.
I’ve been wondering similar things when it comes to multi-column layouts, and I have an idea that I’ve been using that I’d lke to run past you, or anyone else.
I’ve been using <span> elements with the CSS display: inline-block. In combination with the vertical-align: top; property, I can achieve something very much like two or three table cells sitting next to eachother in a row, since they are sitting on the same text baseline (inline) but can take width properties (block). It’s a nice combination of the two.
The problem is, if you stick a DIV inside of these spans, the layout will not validate. Since Spans are default inline, is it not allowed to insert a block-level div inside of them. The reason why I use Spans in the first place is that as early as v5, inline-block is supported in IE only on elements that are by default inline. So, spans, anchors, img tags, etc… can be inline-block, but DIVs can not.
So, the question is, while this is a powerful layout tool, is it off limits since it technically is not allowed? Will the inline-block property eventually go the way of the dodo and cease to be supported?
Anyone?
wue-design
Very useful article. I´ll tell my friends in the office about it. Thanks alot. Markus
achilehero
Hi Eric!
I have stumbled upon this technique while looking for a solution to my problem. I am still not sure if/how I can use it. I think you may have had the same issue. The users have a “screen designer” for a form layout. I need to replicate that in the browser. Now it’s done with absolute positioning, and the problem is that the footer, which comes right after the form’s content, now gets placed to the top because of absolutely positioned elements in the form that don’t provide the form with a height. Can I move the footer in it’s place by still positioning the elements inside the form in the same positions the user did? If so, how. I seem to not getting exactly the point.
Thanks!