Rotated Div / Fixed Position Q

• colin_s

  I'm trying to create a layout where there would be a fixed position navigation bar as the right column on a standard (skeleton based) responsive layout.

  The catch is that I'd like this to be rotated 90 degrees ... however div rotation and fixed positioning, especially in a responsive framework, is ... tricky at best.

  The best I've got so far is separating the div from the framework, but even then fixed position has it lining up all over the place depending on transform-origin.

  Can anyone think of existing examples I can go and scour the code of to see how to solve this? Here's the general idea:

  

  Any help is appreciated, thanks.

  colin_s

  Flag

• PonyBoy0

  maybe use some JS to find real dimensions of the div so you can compensate for the shift using some simple math?

  PonyBoy 0Permalink

  UpvoteDownvote

  Dogear

  Flag

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel

• uan0

  rotate a container with fixed position,
  place content of the container in a div with position:absolute and a width.

  https://jsfiddle.net/xof4fp71/

  uan 0Permalink

  UpvoteDownvote

  Dogear

  Flag

  • aye - this mostly works, i'm just trying to get it a little more padded in / align with the collapsing center div, but this is a solid start thankscolin_s
  • np. good luck.uan

  Show [[ numHiddenNotes ]] more notesAdd Note

  SaveCancel