# CSS positioning - unnesting a nest **URL:** \ **Category:** Factual Questions\ **Created:** [April 3, 2009, 4:36pm UTC](https://boards.straightdope.com/t/css-positioning-unnesting-a-nest/491881 "2009-04-03T16:36:03Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![LSLGuy](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/lslguy/32/5813_2.png) [@LSLGuy](https://boards.straightdope.com/u/LSLGuy)\ **Post date:** [April 3, 2009, 4:36pm UTC](https://boards.straightdope.com/t/css-positioning-unnesting-a-nest/491881/1 "2009-04-03T16:36:03Z")
We do just enough CSS to be dangerous. And we’ve got a weird problem between css & JS that got bubbled up to me. And I’m more of a CSS noob than a pro, particularly when it comes to the black art (to me) of positioning. We have html like this: ```auto
content1
content A
content B
content2
``` Which renders lke content1 contentA contentB content2 So far so good. That’s what we want. But … one customer wants it to render like content1 content2 contentA contentB We’d like to drive this change solely through CSS just for that one customer. If absolutely necssary we could break the nesting of the divs, provided we could retain the original appearance via changed CSS for everybody else. Just a couple small complicators … Run time JavaScript on the page generates all these divs and resizes them on the fly. E.g. the JS creates \
where the ### is dynamically calculated based on external factors. The script then pokes the div (and its children) into the DOM. And the four content pieces are dynamic too. So there are no fixed sizes of anything which can be embedded in the css as offsets. I’m trying to avoid smartening the JS if possible since there are an infinity of positioning options customers might want. If CSS can handle it, that leaves all the heavy lifting to that infrastructure rather than our code. Anybody wanna take a crack at it? ---
**Author:** ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)\ **Post date:** [April 3, 2009, 8:31pm UTC](https://boards.straightdope.com/t/css-positioning-unnesting-a-nest/491881/2 "2009-04-03T20:31:29Z")
Could you do something where the contents of #innerA and #innerB are duplicated as #innerC and #innerD…and for some customers, #innerA and #innerB are display: block while #innerC and #innerD are display: none, and vice versa? ---
**Author:** ![Anthony\_N](https://avatars.discourse-cdn.com/v4/letter/a/858c86/32.png) [@Anthony\_N](https://boards.straightdope.com/u/Anthony_N)\ **Post date:** [April 3, 2009, 10:16pm UTC](https://boards.straightdope.com/t/css-positioning-unnesting-a-nest/491881/3 "2009-04-03T22:16:00Z")
Add a container: ```auto
content1
content A
content B
content2
``` You have to define the position style of the outer container #outer {position:relative} And the inner gets an abosulte position and since its parent has a position property, the inner container’s position is relative to its parent. (I know, it’s counterintuitive) #inner\_container {position:absolute;left:0px} Then you need a little Javascript to assign the ‘top’ property of the inner container to a value that places it at the bottom of the ‘outer’ container document.getElementById(‘inner\_container’).style.top = document.getElementById(‘outer’).style.height + “px”; or if you know what the height is supposed to be for ‘content1’ and ‘content2’, just add those values together and that’s your position for the inner\_container. ---
**Author:** ![Markxxx](https://avatars.discourse-cdn.com/v4/letter/m/5daacb/32.png) [@Markxxx](https://boards.straightdope.com/u/Markxxx)\ **Post date:** [April 3, 2009, 11:42pm UTC](https://boards.straightdope.com/t/css-positioning-unnesting-a-nest/491881/4 "2009-04-03T23:42:12Z")
You may also want to try [Dynamic Drive Forums](http://www.dynamicdrive.com/forums/) These people are great at helping you with CSS, XHTML, JavaScript you name it ---
**Author:** ![LSLGuy](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/lslguy/32/5813_2.png) [@LSLGuy](https://boards.straightdope.com/u/LSLGuy)\ **Post date:** [April 4, 2009, 12:03am UTC](https://boards.straightdope.com/t/css-positioning-unnesting-a-nest/491881/5 "2009-04-04T00:03:42Z")
Thanks folks. What I really want is CSS to be able to say “position \*this \*relative to _that_, not to its container”. But that doesn’t seem to be on offer. Both of the ideas above solve the specific problem, but not the general problem of moving all the divs around relative to each other in any arbitrary manner for any customer. (The actual problem has about 15 of them, so you can see coding JS for all possible permutations of arrangements of the divs is a non-starter. And we try very hard to never solve a one-off problem with a one-off patch; we alway want to to end up with a general solution to the general problem.) I have until Monday to come up with an attack plan, so please keep the ideas coming. Hell, we may find it easier to generate the css dynamically too. Or tell me to abandon hope of a generalized CSS-centric solution. Thanks again … ---
**Author:** ![LSLGuy](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/lslguy/32/5813_2.png) [@LSLGuy](https://boards.straightdope.com/u/LSLGuy)\ **Post date:** [April 4, 2009, 12:24am UTC](https://boards.straightdope.com/t/css-positioning-unnesting-a-nest/491881/6 "2009-04-04T00:24:59Z")
> [@Markxxx](#): > > You may also want to try > > [Dynamic Drive Forums](http://www.dynamicdrive.com/forums/) > > These people are great at helping you with CSS, XHTML, JavaScript you name it Thanks. Done. ---
**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\ **Post date:** [April 4, 2009, 11:53pm UTC](https://boards.straightdope.com/t/css-positioning-unnesting-a-nest/491881/7 "2009-04-04T23:53:33Z")
I don’t think CSS is the right tool for this. To quote your post from DD: > [@](#): > > "I’m trying to avoid smartening the JS if possible since there are an infinity of positioning options customers might want. (e.g. make contentA render above everything, and Content B off to the right. Or vice versa. or …) > > If CSS can handle it, that leaves all the heavy lifting to that infrastructure rather than our code. > > What I really want is a way to say place this adjacent to the left/right/top/bottom edge of that, for arbitrary values of this and that. If there’s “an infinity of positioning options”, it sounds like you actually need a very lightweight templating system. If you’re already going to have to customize output for each customer individually, you might as well give each one their own HTML or JavaScript template instead of a different CSS stylesheet. The idea is the same and the former will give you much more flexibility. The templates themselves can be as simple as: ```auto Customer 1: 1 2 3 4 Customer 2: 1 4 2 3 ``` And your script will look at those and output accordingly. If you want to add left-right arrangements as well, just build that into your templating system too. Then you’ll be modifying the simple plain text templates in the future instead of fiddling with your main script every time. ---
**Author:** ![LSLGuy](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/lslguy/32/5813_2.png) [@LSLGuy](https://boards.straightdope.com/u/LSLGuy)\ **Post date:** [April 5, 2009, 1:18pm UTC](https://boards.straightdope.com/t/css-positioning-unnesting-a-nest/491881/8 "2009-04-05T13:18:33Z")
Yeah, that’s the approach I was afraid we’d end up with. Which is a larger swamp of uncertain depth. We were hoping for an a cheap fix where the only thing really needed was more knowledge on our part. Knowing which wall \*not \*to bang one’s head against is darn valuable advice. Oh well. Thanks again.