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/

Multiple font sizes - Javascript/jQuery typing effect

I have created a simple typing effect, as Illustrated here: http://jsfiddle.net/kitsonbroadhurst/fzf70ttg/9/
My issue is that as the large text is typed it moves the whole line up and down.
Is it possible to keep the text all on the same level as multiple fonts styles and sizes are added? (i.e. as large fonts are added the smaller text does not move vertically)
I have tried to use a position: relative wrapper div and then position: absolute to keep everything on the same line, but this did not work.
.wrapper {
position: relative;
}
.text-box {
position: absolute;
bottom: 0;
}
I would rather not use any type of plugin and would prefer a coded solution.

Set a line height so it won't jump:
p { line-height: 75px; }
With the box model, the browser will calculate the height dynamically according to text size. Putting a hard size on the element will prevent this.

Is it possible to have an auto-height div footer with scrollable content area above?

I am trying to create a container that has two sections - the top section will be a scrolling div that takes up 100% of the vertical height of it's container, minus the height of a sticky footer. The sticky footer cannot have a hardcoded height (because it will work in two modes with two different heights) which is where I'm troubled. I would prefer not to use js, only css if possible.
HTML
<div class="container">
<div class="scrollArea">
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
</div>
<div class="footer">
<!-- the contents of the footer will determine the height needed -->
</div>
</div>
CSS
.container {
position: relative;
height: 100%;
width: 100%;
}
.scrollArea {
position: absolute;
top: 0px;
bottom [height of sticky footer]; left: 0px;
right: 0px;
overflow-x: hidden;
overflow-y: scroll;
}
.footer {
position: absolute;
bottom: 0px;
height: [height of sticky footer];
left: 0px;
right: 0px;
}

You don't want to be using position: absolute; on everything.. This will make it very difficult to style things because a absolute element technically has no height (from the perspective of other elements). You are further confusing things by using the "stretch technique" of using bottom, left, top and right all 0.
Your question is also a bit confusing in terms of how the height will be set.. Is it to be set through javascript? Through media queries? If it is either of those cases, you could easily set the height of the scroll area through the same method, allowing them to change in tandem.
If, for some reason you have to only set the height for this one element, you can let css table display properties do the work of calculating the new height for the scroll area, by setting the container as display: table;, and adding another wrapper around the scrollarea. Setting that wrapper and the footer to display: table-row; will get them laid out.
Check this out to see what I mean:
http://jsfiddle.net/6gprU/3/
Your code sample suggests that the height will be set, somehow.. though if this is not the case, and you absolutely cannot set the height (which would be the case if the content that went into the footer was dynamic and unpredictable in size) then you are making this increasingly difficult. In this case, it would depend on if the overall container height needs to stay a certain size. If it does, like I assume it would, then you may need to rethink your layout, as you have too many variables to be able to do it with pure css.
As a final addition to that, there is another option that would make this really easy. CSS has a feature called calc():
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
This feature allows you to perform calculations in css, much like you would in javascript, and would allow you to set the height of anything in relation to anything, dynamically. However, I put this last, as browser support is a bit limited. It will not work in IE 8 or below.
Check this site to see where it will work, and then make the decision as to wether this is a valid option for you or not.
http://caniuse.com/calc

Overlaying one div over another, but not knowing the size of the div

I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.
Solved here:
How to overlay one div over another div
So, here is my HTML:
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).
See my example on jsFiddle
The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.
One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.
Is there any way of solving this problem in CSS?

You could set the position to absolute and then set all 4 positioning values to 0px which will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/
This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual height and width values), because its always going to be adjusted to the outer dimensions of the box.

It's not possible to do this because:
The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
The size of the content div can change as content loads (since it has no fixed width/height).
I solved this by using JavaScript*. Eg.
function resizeOverlay() {
$('.overlay').css({
width: $('.content').width()
height: $('.content').height()
});
}
$('.content').find('img').on('load', resizeOverlay);
*Code not tested.

Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ
CSS
.container {
position:relative;
background:blue;
color:white;
}
.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}

I do not know what you are exactly trying to do but this might work:
container must be relative: anything from static
overlay and content are absolute :move top/left in first non static parent; no flow.
Give same top/left to be on top and higher z-index for upper element.

See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/
Are you trying to do as mentioned in above Demo?
CSS:
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay{
z-index: 10;
background: #ccc;
}

You can indeed do this without JavaScript. Your problem is that #container element has 100% width relative to the whole page. To fix this you can:
a) position it absolutely,
#container {
position: absolute;
}
b) make it float or
#container {
float: left;
}
c) make it display as table cell
#container {
display: table-cell;
}
One of the above is enough, you don't need to apply all. Also you should not position .content absolutely as this will prevent #container to have the same width/height.

If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.