How to center main div horizontally between page and fixed menu. using skeleton

Question

I'm looking for the best way to do the following:

--------------------------|--------------------------
|    |                                              |
|    |           -------------------------          |
|fix-|           |                       |          |
|ed  |           |                       |          |
|    |           |       #content        |          |
|menu|           |                       |          |
|    |           |                       |          |
|    |           |                       |          |
|    |           -------------------------          |
|    |                                              |
|    |                                              |
--------------------------|--------------------------

I need it so that the content area is centered horizontally between the right edge of the window, and the fixed menu. I'm using the skeleton boilerplate for the right area, and I'd appreciate it if I could get that centered, though I'm not sure if it breaks skeleton to do this.

I'm still very new to all this, and I'd like to preemptively, say thanks for your help.

Is the menu a fixed and known width? – grc Dec 29 '13 at 13:21 — grc, Dec 29 '13 at 13:21

score 0 · Answer 1 · edited May 23 '17 at 10:32

Use margin property of css

#content{
   display:block;
   margin: 10px auto; /* set top margin to whatever you want */
   width: 100px; /* width of the object */
   height: 100px; /* height of the object */
}

Or if you can set the position to fixed, here is an other way:

#content {
  position: fixed;
  top: 50%;
  left: 50%;
}

What that accomplishes is putting the upper left corner of image exactly in the center of the page, not the center of the image in the center of the page. In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. For this example, like so:

#center {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

Check this article: http://designshack.net/articles/css/how-to-center-anything-with-css/

Or check one of the tons of answers given to this question:

How to horizontally center a <div> in another <div>?

score 0 · Answer 2 · answered Dec 29 '13 at 13:28

The skeleton grid is split into 12. If you use 2 more a menu and the other 10 for the rest of the screen. You can then make the content area say 4 by using

<div class="ten columns"> 
    <div class="two columns">
        put code here
    </div>
    <div class="four columns">
        put code here
    </div>
    <div class="two columns">
        put code here
    </div>
</div>

you could also do just four columns offset by two

How to center main div horizontally between page and fixed menu. using skeleton

2 Answers2