1

I have a page that I'm working on (longtime developer, new to CSS tho) where I have layed out a bunch of divs with content. I tried to make each div at the same level and not nest a bunch of stuff so that I could move them around more easily. So the question is if I want to have those divs in a completely different layout, is it appropriate to use CSS to put negative margins on a bunch of stuff along with relative positions an shove them into the right place.

So if page one was:

<div class="div1">stuff here</div>
<div class="div2>other stuff</div>

So by the natural order of divs, div2 is below div1. But what if I want to move div2 above div1? The only way I've seen to do this is to set div2 to relative position and shove it where I want with top, left, right and bottom.

It seems odd, but it works. It just seems really inelegant. One page is natural and requires no manipulation, the second is forced into place.

Is there a better way to accomplish my goal?

Nicros
  • 5,031
  • 12
  • 57
  • 101
  • This is a good answer: [Another Stack question](http://stackoverflow.com/questions/558614/reorder-divs/558642#558642) Doing this to any length without javascript could get really ugly, quickly. – Steve Adams Nov 17 '11 at 05:33
  • position: absolute; combined with top/left/right/bottom values is probably more what you'll want – reisio Nov 17 '11 at 06:14

2 Answers2

0

You are trying to do structure with CSS. That's not what it is for. The structure is done with the HTML, and CSS does the presentation. If you want to reverse order than change the HTML. Then use CSS margin, padding, align, float, and all the other attributes to get exact positioning and the polished look you want.

HTML is a MACK truck. CSS is Porshe.

COBOLdinosaur
  • 284
  • 2
  • 6
  • 1
    Checkout my answer. When it comes to layout, order of stacked/ordinal boxes is within CSS domain. When you start to re-order ordered list items via CSS, that's messing with content. For example, if you have two divs and you float the first on right and the second one left, you swapped their order using CSS. Why should vertical swapping be different? – kmiyashiro Nov 17 '11 at 05:42
  • The fact that flexbox requires proprietary hacks makes it clear that the final standard is not yet been decided upon. Hhis will just add to the hacks like absolute positioning that encourage developers to build pages that end up broken and unmaintainable. If someone wants to draw a page like they are doing a magazine layout, they can already do that with absolute positioning and any number of hacks. Just put everything in div tags and move them where you want. Who needs HTML? It's like a carpenter with nothing but hammer in their toolbox. Everything everything gets fixed with a nail. – COBOLdinosaur Nov 17 '11 at 17:56
  • the flexbox model will be way easier to use than absolute positioning when it comes to dynamic sizing. Absolute positioning would require keeping careful tabs and calculations on all the items, padding, etc, and even then, couldn't achieve what flexbox can. The standard may not be final, but flexbox proposed functionality hasn't changed for a while and has support in all modern browsers. Flexbox would relieve the need for much messier hacks... it's not a hack at all. – kmiyashiro Nov 17 '11 at 22:19
  • If it is not standard it is a hack and (-moz/-webkit) is not standard. – COBOLdinosaur Nov 18 '11 at 02:18
0

http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/

Scroll down/search for box-ordinal-group. Essentially you can define reverse order or arbitrary order using flexboxes. Unfortunately, the flexbox display is only supported via browser extensions (-moz/-webkit) by the good browsers. Check out http://icanuse.com for more info.

kmiyashiro
  • 2,249
  • 14
  • 15