We Keep Coding

Image and button placed by percentage but are cropped when I resize the window

I'm trying to make my application responsive.
For that, the first thing I did was placing my buttons and logo by using percentages instead of pixels.
The problem is that when I resize my window to a smaller one, the buttons and logo are moving but they are also cropped on the side like this:
Here is what the button looks like before resizing:
And here is what it looks like after resizing to a smaller one:
How can I make it move but still appear in its entirety ?
Here is my CSS for this button:
#next-step{
position: absolute;
top: 90%;
left:88%
}

Change the CSS as follows:
#next-step{
position: absolute;
bottom: 1em;
right: 1em;
}
By using bottom and right instead of top and left, the reference will be the bottom right corner of your container. This way your button will never crop. You can play with the values to adjust the position of the button as you like.

Changing the position values to bottom and right might help you out. You could try this CSS code and maybe adjust the percentage values to your liking:
#next-step{
position: absolute;
bottom: 10%;
right: 12%;
}

This comes down to the way you're positioning the element.
#next-step{
position: absolute;
top: 90%;
left:88%
}
Is positioning the button based on the top-left corner.
If you were to instead use:
#next-step{
position: absolute;
bottom: 10%;
right:12%
}
It'll set the position to a similar place on-screen, but based on the bottom-right corner (you'll need to fine tune the numbers).
However, one thing to note: when using percentages, once you get below a certain screen size it can get messy, so it'd be worth looking at media queries too.

Positioning div to the right with an undefined width

I'm going to have trouble explaining what I mean but bear with me. First here's my fiddle https://jsfiddle.net/jmajnqej/5/ (updated by Aziz)
#freelancewrapper {
width: 100%;
max-width: 1000px;
height: 440px;
background-color: #9D9D9D;
position: absolute;
}
I'm trying to get freelancewrapper to hug the right side of the screen with no padding. It needs to stay connected to the very right side of the screen no matter what width the window is. To make it more complicated it's parent div contentwrapper has to stay where it is with the same width and margins.
here is a representation of two screen sizes to show what I mean. http://imgur.com/a/IkOwx
Update: I didn't realize it at the time but this is a two part question. Positioning it was easy but getting the right correct width property is not. Here's my question for that Trouble defining width of a responsive div.

All you have to do is add the following CSS properties to your element:
position: absolute;
right:0;
jsFiddle fork
If you want the div to remain attached to the screen when scrolling, you can replace absolute with fixed.
Keep in mind that position: absolute works relative to the first parent tag with a position:relative. by default, that tag would be the body.
Also an important thing to keep in mind is that when an element is absolutely positioned, it will lose its space in the layout and hover over all elements.

I can't tell you the exact value you should need to achieve the desired result. What i would advice for trying to make your styling "responsive" is to start 1. from a mobile first approach(easier to up the screen size then downsizing).
To further answer your question try using relative units. your width for example is 100% this is relative. But instead of pixels try using em.
every ~16 px(not precise) is 1.0 em.
furthermore you can use position: absolute;
good luck further.

Like Paulie_D said you can use position
CSS
.contentwrapper {
width: calc(100% - 190px);
max-width: 1160px;
margin-top: 50px;
margin-left: 40px;
position: absolute;
right:0;
}
DEMO HERE

you can use negative right margin on <div class='contentwrapper'>
.contentwrapper{
margin-right: -48px;
}
https://jsfiddle.net/linkers/jmajnqej/3/

div always sticking to the left border of the page

I've got a <div id="mydiv"> with margin-left: 0px.
But sometimes (the page is dynamically generated) that this <div> is placed within another <div> that has a positive margin-left value.
This way #mydiv will have the margin of the container and not 0.
Is there a way to set
margin-left: 0px (relative to the body margin)
or
margin-left: -(sum of container margins)?

If your div is inside another one, the boundaries for that div are limited to it's container div.
You can break out of it by putting position: absolute; on the div you want to position differently. Then you should put a position: relative; on the container it should be relatively positioned to. Then you can use a negative margin-left.

use:
.mydiv{
position: absolute;
left : 0;
}
By using an absolute position and setting left to 0 your div will always be aligned with the left side of the containing element with no margin.

Use CSS positioning property and align the div's respectively.
For Example
You have a <div class="wrapper"> style this with position:relative
And for the inside <div class="mydiv"> style with position: absolute; left: 0; or left: 50%.

The main point is positioning:
position: fixed; will position the div relative to the browser window
position: relative; will position it relative to its normal position
position: absolute; will position it relative to the first parent element that has a position other than static (so it is not really absolute after all)
check http://www.w3schools.com/css/css_positioning.asp

You can achieve it with positions like relative and absolute.
You just need one top parent above all div.
I have created following example. It will help you to achieve what you need.
[Example](http://jsfiddle.net/dhavalsolanki/tjv5e1tn/)

Css float:right 100% Height, image align bottom

Im using a float: right on my website. I want to make that div 100% of the window height minus a 10px margin. I want the height to resize with the page.
I also want the image in it to sit at the bottom of the 'container' minus 10px padding.
I've tried adjusting everything, and am sure its something in the code conflicting but i just can't work it out.
Thanks for any suggestions in advance.

I suggest you use absolute positioning instead of floating for this, you can make elements expand by setting for example top and bottom at the same time.
Absolute positioning could work for the image as well if you set its bottom to 10px (its offset parent will already be the right container, because any position other than the default static makes the element an offset parent).
Quick example:
/* this makes your body take up the whole screen */
html, body { height: 100%; }
/* the positioning magic */
#right { width: 100px; position: absolute;top: 10px; bottom: 10px; right: 20px; }
jsFiddle Demo
​UPDATE: and an updated jsFiddle to show an example on putting another element in the container and positioning it to the bottom.
#image { position: absolute; bottom: 10px; left: 20px; }

Fixed sidebar centered vertically

A website I am building has a fixed sidebar on the left at the center of the screen. It should always stay at the vertical center of the browser window when the page is scrolled.
How can I achieve this effect? Is there a pure css/html solution?
I thought about updating the sidebars position onscroll, but it is likely to flicker as the css top position gets updated. Is there any other solution? I would really like to do this with css only, but I wouldnt mind if jquery would provide the functionality I am looking for.

You probably need to add position: fixed; to the css to make it so that it does not move.

Here's what you are looking for. Please note that mobile browsers will ignore position:fixed so you will need to use some js to make it work for them as well. Also, make sure that the container's min-height is 200px;
#sidebar
{
height: 200px;
position: fixed; /* Keep in position on scroll */
top: 50%; /* push down 50% of container */
margin-top: -100px; /* bring back up 50% height of this element */
}
#container
{
min-height: 200px;
_height: 200px; /* IE6 always acts as though height is min-height unless overflow: hidden */
}