0

Trying to make a three column design work well for super wide or high res screens. Here's what it should look like, specifically the third column being flush with the second one: bingo

Here's what it looks like widescreen: no bueno

It's supposed to be sticky for those with smaller browsers (it's an interactive query builder), but with larger screens its right attribute takes it way too far away from the center point. Absolute positioning would remedy the flushed issue, but it'd ruin the sticky goal.

Is there an elegant way to do this or should I alter the positioning via javascript based on browser resolution?

Thanks,

John Blythe
  • 603
  • 1
  • 7
  • 21
  • I'm not certain, by [my answer in this question](http://stackoverflow.com/questions/3303173/position-element-fixed-vertically-absolute-horizontally/3303944#3303944) may be of use to you. – ScottS Apr 10 '13 at 19:25
  • are you positioning them as responsive(%) or in a fixed state(px). check that the margins arnt collapsing. use a border.. read here http://reference.sitepoint.com/css/collapsingmargins – legendary_rob Apr 10 '13 at 19:32
  • that's pretty freaking sweet, man. thanks for sharing. i went ahead and did a js hack for now cause i'm trying to push this out immediately before leaving town. when i get back and take time on refinement, though, i'll come back here and use what you've got. thanks again! – John Blythe Apr 10 '13 at 19:32
  • i had been using them in responsive fashion with percentages – John Blythe Apr 10 '13 at 19:32
  • @JohnBlythe Have you tried left float @ 33% width on the three of them, with the middle content the contained content will have to be 100%. – Justin Apr 10 '13 at 19:36

1 Answers1

1

No one responsed, so I decided to make this jsfiddle example. From reading the discription, it was what I THOUGHT you where asking for. Not perfect, but that's what you get for 10 min of work, no?

As most of the "sticky" examples show, you just need to use position: fixed;, but when using floats, as I did, you have to wrap the content you want to "sticky" and set that elements position to fixed

Justin
  • 3,337
  • 3
  • 16
  • 27
  • Hey Justin. Sorry I hadn't replied yet to your comment. Been a balls-to-wall sort of week trying to wrap some things (like this) up before leaving the country. That does get the flush portion taken care of. Part of the problem it then creates, though, is an ever widening middle container. There is some room for it to flex, but not as indefinitely as this type of setup lends itself to. Thanks for the time invested in putting this together, though. I appreciate it. – John Blythe Apr 11 '13 at 22:17
  • ya, i think your method along with a max-width would work to some extent. the problem still creeps in though when the browser width is ultra wide and max-width has been reached – John Blythe Apr 12 '13 at 19:08
  • actually, i take that back. my old method had that issue, but your methodology would alleviate that wouldn't it? nice. – John Blythe Apr 12 '13 at 19:09