tomatoKetchup Posted October 29, 2014 Share Posted October 29, 2014 (edited) Hi there. I am building a website that has its body centered in the page and it's width is exactly 768 px. I want right on it's left (and touching it) a menu that will always stay on screen while scrolling down. Here's how I thought to do: The body's css (in fact in my code a <div> with id="canvas"): #canvas { float : auto ; margin-left: auto ; margin-right: auto ; top : 100% ; bottom : 100% ; width : 768px ; } And my menu <div id="floatMenu">: #floatMenu { position : fixed ; width : 64px ;} Now, in order to keep this menu always exactly on the left of the "canvas", I came up with a simple formula which is: 50% - (768 / 2)px - (64)px (see image attached) * 50% is the center of the browser's window * (768/2) is half of the canvas' width * 64 is the width of the floatMenu itself My question is: would it be possible to code this formula in CSS? And if not, I'm open to any suggestions to position my menu the way I want it. Thanks in advance for reading! Thomas Edited October 29, 2014 by tomatoKetchup Link to comment Share on other sites More sharing options...
Ingolme Posted October 29, 2014 Share Posted October 29, 2014 You can do this: position: fixed;left: 50%;width: 64px;margin-left -448px;/* 64 + 768 / 2 */ This starts the box in the center and then moves it to the left by the width of the box itself + half the width of the other box. This technique only works when both boxes have a fixed width and use the same units of measurement. Your particular situation qualifies, so we can use this method. Just remember that the left box will be inaccessbile outside the screen on small screens. Link to comment Share on other sites More sharing options...
tomatoKetchup Posted November 3, 2014 Author Share Posted November 3, 2014 Sorry for the late reply, althought I clicked on "Follow this topic" I never got any notification of your reply neither by mail nor on the site's dashboard... Need to figure out how this works.... Anyway, a big thank you for this idea, I never though of that and this indeed work well! I might need to figure out a more elegant way to arrange my layout in the future but that sure will do it for the moment. Thanks again for your reply! Thomas Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now