viery365 viery365 - 6 months ago 14
jQuery Question

Fixed positioned element with the same distance to another element when browser window is larger

I am struggling all afternoon to resolve a problem. Maybe this is a common question but I could not find anything similar in here or on Google. I hope you guys can help.

I have a fixed positioned element on the left of the page and I want that the distance between that element and another on the page be always the same when the browser window is larger. How can I do it?

Now, the other element has to be set in percentage while the fixed element can be or not with pixels.

Is there any css calc(), javaScript, jQuery, something you can think of to resolve this?

enter image description here

enter image description here

HTML

<div class="fixed"></div>
<div class="left-element"></div>


CSS

body {
margin: 0;
padding: 0;
border: 1px solid black;
min-height: 2000px;
min-width: 100%;
}

.fixed
{
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background-color: blue;
}

.right-element {
width: 25%;
height: 200px;
background-color: yellow;
margin-left: 75%;
}


Here is the Fiddle

Answer

I have the same solution as @Calvin Claus but with just a minor css modifcation, no javascript needed

.right-element {
  width: calc(100% - 400px);
  height: 200px;
  background-color: yellow;
  margin-left: 400px;
}

fiddle

Update: Similar, but as you asked, the calc on the fixed element.

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  height: 200px;
  width: calc(75% - 200px);
  background-color: blue;
}

.right-element {
  width: 25%;
  height: 200px;
  background-color: yellow;
  margin-left: 75%;
}

new fiddle