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.
Use margin property of css
Or if you can set the position to
fixed
, here is an other way: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:
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>?