Decrement right css by 4.5px forever 10px decrement width
I have a code for which it is on the right of the page. it is fixed there by css like this:
#feedback
{
position: absolute;
width: 230px;
float: right;
height: 60px;
right: 310px;
top: 190px;
}
but when the window is resized the cs "right" property should also shrink as this div is not showing if the window is minimized than 100%
Initially the
$( window ).width() = 1899px;
"right" property for the feedback div should be 310px
For each shrinking 10px in the window width, the right css of the feedback div should shrink 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 cannot make this logical work. Can anyone help
source to share
You can only do this with css using% and margin values.
In my example, the inner element has a margin-right of 10%. This means that as the container changes width, the offset to the right also changes in size, as does the inner element.
The width of the container is also%, so it folds when the window folds.
css is located here:
.container {
width: 100%;
}
.internal {
float: right;
width: 50%;
margin-right: 10%;
}
It's important to note that the internal margin-right is the% of the container, not the element it belongs to.
To fix the width of the inner element, just use a fixed width, the box will still use the width of the container and keep it spaced relative to the width of the container.
See the second JsFiddle . The only change: width: 300px;
instead of width: 50%;
on the inside.
source to share