Jump to content

Writting maths formulas in CSS stylesheet?


tomatoKetchup
 Share

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!

 

Thomas

post-178046-0-92279000-1414584616_thumb.png

Edited by tomatoKetchup
Link to comment
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 comment
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!

 

Thomas

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...