Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using fixed position with a grid layout framework

So I am creating a web page, where the menus on the left hand side are fixed (They follow you when you scroll up and down the page). I am currently using The Grid layout: Foundation (by zurb) http://foundation.zurb.com/docs/grid.php. Which uses a twelve column grid. I am having problems positioning the fixed layout and still using the grid at the same time. How can I use a grid layout and fixed elements on a page?

<div class="container">
   <div class="row">
        <div class="four columns relativePosition">
              <div class="fixedPosition">
                   <div class="four columns">
                        Menu Here
                   </div>
              </div>
        </div>
        <div class="eight columns">
              Other Content
        </div>
   </div>
</div>

I was able to get the fixed position to work using this structure but in some cases the contents of the menu grows too big and overlap the contents of the eight column. I dont know if there is a better way to doing this?

like image 782
Adim Avatar asked Feb 29 '12 00:02

Adim


People also ask

Does position fixed work with grid?

Since position fixed will mess up any grid layout I tried to use a hacking putting two divs around each container where the second div would have a position fixed but it is still having some weird effects.

Can You Use Flex and grid together?

Of course CSS grid and flexbox can work together in a layout. You can use flexbox inside CSS grid and vice versa. For instance, you could use flexbox to center an element like a button both vertically and horizontally within a particular grid cell (since centering with other CSS methods is … tricky).

How do you handle position fixed inside a div?

Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.


2 Answers

Found this article - ZURB + ScrollSpy. Got it working in 5 mins. What I found that wrapping the sidebar content in scrollspy div underneath the grid position.

like image 74
cosmicdot Avatar answered Sep 23 '22 08:09

cosmicdot


Using javascript to solve a problem like this seems like overkill. I would try to keep to the basics by using Foundation's offset classes like this:

<div class="row twelve columns">
  <div class="two columns" style="position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;">
    Menu
    <ul><li>Menu Item</li></ul>
  </div>
  <div class="ten columns offset-by-two">
    Content goes here
  </div>
</div>

Hope this helps!

like image 22
Marz Avatar answered Sep 26 '22 08:09

Marz