Using CSS to change a page layout?

Question

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?

This is a good answer: Another Stack question Doing this to any length without javascript could get really ugly, quickly. — Steve Adams
position: absolute; combined with top/left/right/bottom values is probably more what you'll want — reisio

COBOLdinosaur COBOLdinosaur · Accepted Answer · 2011-11-17T05:37:15

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.

Using CSS to change a page layout?

2 Answers