<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div>I think box-ordinal-group is the 100% right way to do it ... it's just finding support.</div><div><br></div><div>Another way I've been toying with (for SEO reasons) is to structure the HTML in a way that puts the content as close to the top as possible:</div><div><br></div><div><br></div><div><html></div><div><head /></div><div><body></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><div id="content></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><div id="logo"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><nav id="main"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><nav id="footer"></div><div></body></div><div></html></div><div><br></div><div>Then, I place #logo and #main at the top of the screen using position:absolute and move the content pane into place using margin-top. That way, the content still pushes the footer down as it flows and resizes. It works surprisingly well across browsers back to IE6, but can cause problems with scaling. That can get tricky, since you're then dealing with percentages and ems.</div><div><br></div><div>Here's an example ... only tested in Safari and iPhone: <a href="http://org.asq.uxl.s3.amazonaws.com/boilerplate-with-mobile.html">http://org.asq.uxl.s3.amazonaws.com/boilerplate-with-mobile.html</a></div><div><br></div><div>Happy to answer any questions. Again, I think box-ordinal-group is the best way to go, but this way sure has it's advantages.</div><div><br></div><div>nz</div><div><br></div><div><br></div><div><div><br></div><div><div>On Jun 15, 2011, at 4:42 PM, Jordan Dobson wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div bgcolor="#FFFFFF"><div>Try using the <span class="Apple-style-span" style="-webkit-tap-highlight-color: rgba(26, 26, 26, 0.292969); -webkit-composition-fill-color: rgba(175, 192, 227, 0.230469); -webkit-composition-frame-color: rgba(77, 128, 180, 0.230469); font-size: 15px; color: rgb(0, 102, 0); font-family: Monaco, monospace; ">box-ordinal-group</span><span class="Apple-style-span" style="-webkit-tap-highlight-color: rgba(26, 26, 26, 0.296875); -webkit-composition-fill-color: rgba(175, 192, 227, 0.230469); -webkit-composition-frame-color: rgba(77, 128, 180, 0.230469); "> in CSS3 for browsers (mobile?) that support it.</span></div>
<div><span class="Apple-style-span" style="-webkit-tap-highlight-color: rgba(26, 26, 26, 0.296875); -webkit-composition-fill-color: rgba(175, 192, 227, 0.230469); -webkit-composition-frame-color: rgba(77, 128, 180, 0.230469); "><br>
</span></div><div><span class="Apple-style-span" style="-webkit-tap-highlight-color: rgba(26, 26, 26, 0.296875); -webkit-composition-fill-color: rgba(175, 192, 227, 0.230469); -webkit-composition-frame-color: rgba(77, 128, 180, 0.230469); ">Basics here:</span></div>
<div><span class="Apple-style-span" style="-webkit-tap-highlight-color: rgba(26, 26, 26, 0.296875); -webkit-composition-fill-color: rgba(175, 192, 227, 0.230469); -webkit-composition-frame-color: rgba(77, 128, 180, 0.230469); "><br>
</span></div><a href="http://www.html5rocks.com/en/tutorials/flexbox/quick/">http://www.html5rocks.com/en/tutorials/flexbox/quick/</a><div><br><div>-- </div><div>Jordan Dobson • Designer / Developer • 425-444-8014 • About.Me/JordanDobson</div>
</div><div><br>On Jun 15, 2011, at 2:17 PM, "Nazir, Cassini" <<a href="mailto:cassini@utdallas.edu">cassini@utdallas.edu</a>> wrote:<br><br></div><div></div><blockquote type="cite"><div><span>Is it possible to re-order content using CSS without using absolute positioning? Here's what I mean:</span><br>
<span></span><br><span>I'm playing around with multiple stylesheets for a site that I'm working on. I would like the <nav> content to appear before the <article> content on desktops, but on mobile devices I would like the <nav> content to appear after the <article> contents.</span><br>
<span></span><br><span>So the code might be something like this for desktops:</span><br><span></span><br><span> header { order:1; } /* this would appear first */</span><br><span> nav { order:2 } /* second */</span><br>
<span> article { order:3 } /* last */</span><br><span></span><br><span>But on mobiles something like this:</span><br><span></span><br><span> article { order:1 }</span><br><span> nav { order:2 }</span><br><span> header { order:3 }</span><br>
<span></span><br><span>Not sure if this makes sense. Is this possible using CSS only and not PHP?</span><br><span></span><br><span>Cassini Nazir</span><br><span></span><br><span>Web Developer, Student Affairs</span><br><span>The University of Texas at Dallas</span><br>
<span></span><br><span>_______________________________________________</span><br><span>Help mailing list</span><br><span><a href="mailto:Help@lists.whatwg.org">Help@lists.whatwg.org</a></span><br><span><a href="http://lists.whatwg.org/listinfo.cgi/help-whatwg.org">http://lists.whatwg.org/listinfo.cgi/help-whatwg.org</a></span><br>
</div></blockquote></div>
_______________________________________________<br>Help mailing list<br><a href="mailto:Help@lists.whatwg.org">Help@lists.whatwg.org</a><br>http://lists.whatwg.org/listinfo.cgi/help-whatwg.org<br></blockquote></div><br></div></body></html>