Positioning Div outside of Responsive Grid

Question

I'm creating a responsive website using HTML5/CSS3/Jquery and Media Queries.

I've got a page full of images (gallery) which is inside a 16 column grid, so it scales nicely to fit tablet/mobile etc.

I've also got a div which is absolute positioned outside of the grid, and its purpose is to display text/info whenever the cursor is hovered over one of the images (each image will have its own info).

The problem:

 _ _ _ _ _ _ _ _ _ _ _ _         _ _ _ _ _ _ _ _ _ _
| _ _ _    _ _ _ _ _    |       | _  _ _ _ _ _      |
||info |  | 16 col  |   |       ||in|16 col   |     |
||     |  |  grid   |   |   =>  ||  | grid    |     |
||_ _ _|  | gallery |   |   =>  ||_ |gallery  |     |
|         |         |   |       |   |         |     |
|         |_ _ _ _ _|   |       |   |_ _ _ _ _|     |
|_ _ _ _ _ _ _ _ _ _ _ _|       |_ _ _ _ _ _ _ _ _ _|

When I resize the browser window, the gallery (main content/grid) moves into and overlays the 'info' div.

I've tried making the info div relative positioned, which in a way worked, but ended up snapping the responsive 16 col container below the info div when scaling the page down - not what I'm after.

The Question:

Is there any way to get the two elements to sit side by side, and for both to always be visible on the page AT LEAST up to the point where media query for tablet (~959px wide) kicks in? (Then I can just remove it)

Any comments/feedback/suggestions are much appreciated. Thank you.

Maybe you can use flexbox to position them side by side? Or use floats if you need better browser support. Give the info div a % width and a max width. — Achshar

Nandu Hulsure Nandu Hulsure · Accepted Answer · 2013-12-07T13:22:38

As i see the example this could be one of the reason 

1. if you are making the info div as relative then add the z-index property to it.
2. if you are making the info div as Absolute then provide the position property as left/top etc.

Positioning Div outside of Responsive Grid

1 Answers