Jump to content

Writting maths formulas in CSS stylesheet?

Recommended Posts

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!




Edited by tomatoKetchup
Link to post
Share on other sites

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 post
Share on other sites

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!



Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...