javascript - decrement of right css by 4.5px for ever 10px decrement of width -


i have code on right of page. fixed there css follows:

#feedback { position: absolute; width: 230px; float: right; height: 60px; right: 310px; top: 190px; } 

but when window size resized cs property 'right' should reduce div not visible if window minimized 100%

initially $( window ).width() = 1899px; 'right' property feedback div should 310px

for every reduce of 10px in window width, right css of feedback div should reduce 4.5px egg.

width = 1899px  right property = 310px 

width = 1889px right property = 305.5px width = 1879px right property = 301px

. . . . util width = 1234px right property = 0px

i'm not able make logic work. can please help

you can css only, using % values , margin.

see jsfiddle

in example, internal element has margin-right of 10%. means container changes width offset right changes in size too, internal element.

the container width % flexes window flexes.

the css here:

.container {     width: 100%; }  .internal {     float: right;     width: 50%;     margin-right: 10%; } 

it's important note internal margin-right value % of container, not element belongs to.

to fix width of internal element use fixed width, margin still use container width , keep spaced relative width of container.

see second jsfiddle. change width: 300px; instead of width: 50%; on internal.


Comments