Develop Reference

Moving a CSS Element Vertically Without JS

Is there anyway I can make an HTML div move down while scrolling instead of moving up without using javascript? I know you can use window.onscroll = function() { } and have that move the position of an object while scrolling, but is there anyway I can move an object down with just CSS and HTML?

I think you want to retain your div on the viewport while scrolling down.
There are 2 ways for it.
Make the element position fixed and apply positioning to that element.
Make parent element position relative and make your div position sticky and apply positioning.
Positioning means adding any one of the top, right, bottom, and left properties.
.parent {
height: 1200px;
width: auto;
position: relative;
}
.floating {
position: sticky;
top: 10px;
width: 100%;
height: 60px;
background: black;
color: white;
}
<div class="parent">
<p>Hi this is parent</p>
<div class="floating">
This is floating element
</div>
</div>

Always scroll on particular div

Let's say I have a site with a central div, approximately 50% of the width of the window, with other divs either side of it filling up the remaining space. The spanning divs are fixed, and don't move, nor can they scroll.
At the moment, when my mouse is over one of the spanning divs, I (naturally) can't scroll the central div. My question is this: is there a way to ALWAYS have scroll focus on a particular div, no matter where the mouse is located on the page?
EDIT: What I actually have is this:
<div id='wrapper'>
<nav id='sidebar'></nav>
<div id='rhs'></div>
</div>
where wrapper and sidebar both have position fixed, and sidebar and rhs are adjacent in the center of wrapper (i.e. margin: 0 auto; to sit them in the middle). Scrolling with my mouse over either wrapper or sidebar does not scroll rhs, despite the positions being fixed (so Toni Leigh's answer doesn't work for me here).

Yes, you can do this using position: fixed;
The two outer divs are fixed to the screen regardless of scroll position. The the central div scrolls regardless of where the mouse pointer is. You use top and bottom to fix the full height of the screen, then left and right to fix each on either side.
You can still interact with content in the fixed outer divs.
Please see this example

Something like this? Demo
You set the two side divs to be have a position: fixed property and by using top: 0, left: 0 and right: 0 you can move these into position to the top left and top right respectively.
Then you can have a regular element in the middle. The scroll will now always affect the non-fixed element. (I added a background picture so you can see they don't scroll).
HTML
<div class="fixed left"></div>
<div class="center"></div>
<div class="fixed right"></div>
CSS
.fixed {
width: 25%;
height: 100%;
background-image: url('http://www.6wind.com/blog/wp-content/uploads/2014/04/Vertical-White-car-Banner.jpg');
position: fixed;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.center {
position: relative;
margin: 0 auto;
width: 50%;
height: 5000px;
background: red;
line-height: 0;
}

Modal window with just CSS

Is this possible, or do I have to use JavaScript to set modal height to body height? for example:
$('.modal').height($('body').height())
I can't use this CSS:
.modal{
position: relative;
height: 100%;
}
Because modal parent height is calculated according other children.

You can use CSS as you list above but use absolute positioning.
.modal {
position: absolute;
height: 100%;
width: 50%;
top: 0;
left: 0;
}
Just remember that the element will be positioned relative to it's first positioned ancestor.
So, if you want this to be positioned relative to the top left corner of the browser, make sure the modal element is not nested inside of another positioned element elsewhere on the page.

Dead Centered Div

How is it possible to center a div both horizontally and vertically with respect to the screen, not the page. So that when the user scrolls down a long page, the div remains horizontally and vertically centered?

Here's a pure CSS solution, note the percentages and negative margins.
http://jsfiddle.net/R7Xy2/
div {
position: fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}

Here is your code
http://www.geekdaily.net/2007/07/04/javascript-cross-browser-window-size-and-centering/
just attach this event to window.onscroll. No need to use jQuery, try this
function addEvent(obj,ev,fn) {
if(obj.addEventListener) obj.addEventListener(ev,fn,false);
else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);
}
addEvent(window,"scroll",yourfunction);
good luck

You may also try the following:
HTML markup:
<div class="classname">text here</div>
CSS:
.classname {
position:absolute;
left:50%;
top:50%;
padding:10px;
border:1px solid #ccc;
}
The border and padding can be changed or removed on the basis of requirement. Also, make sure that the parent container must be positioned relatively, i.e. it should have position:relative.

CSS for the <div>:
position: absolute
left : (centerofpagepixel.x - (width of div /2));
top : (centerofpagepixel.y - (height of div/2));
Set the above using jQuery on the <div>.
You can calculate the centerofpagepixel.x and y using jQuery again. Probably get the width/height of the screen and divide them by 2.

How do I do this absolute positioning in CSS?

<div id="container" style="float:left;">
<img src="{{ p.sizes.2.url }}" width="200" height="auto">
<div class="trans_caption" style="position:absolute;background-color:#cccccc;">
Picture Caption
</div>
</div>
How do I overlay the caption on top of the picture...but aligned on the bottom? Also, I want the caption width to be the same as the container. I tried to do width:100%, but it didn't work...

Is that what you are looking for?
Just set position:relative in your main div - it will allow to position inner div relatively to the main div, and set bottom:0 in your inner div to position it on the bottom. Small hack with float:left and width:100%, without float width:100% doesn't seem to work properly.

<div style="position: relative; width: 200px;">
<img src="" />
<div style="position: absolute; bottom: 0;">
<!-- caption text here -->
</div>
</div>

<style>
div#container {
position: relative;
float: left;
}
div#container div {
position: absolute;
bottom: 0;
background: #ccc;
}
</style>
<div id="container">
....

You need to set position: relative on #container. That will make the absolute positioning relative to the edges of that container div.
Add bottom: 0; to .trans_caption to make the baseline (not the exact bottom) of the text aligned with the bottom of the picture. Increase that number if you want to move the text higher up.
Add width: 100% to .trans_caption to make it as wide as its container.
If you want to center the caption, add text-align: center; to .trans_caption.
Note that the auto value for an image's height attribute is not valid.
It's best to keep the CSS separate from the HTML markup, in a separate file. What we have now would be (try it out):
#container {
float:left;
position:relative;
}
.trans_caption {
background-color:#cccccc;
bottom:0;
position:absolute;
text-align:center;
width:100%;
}

Absolute positioning means that the element will be positioned at a specific spot on the last parent that is not positioned with the default, position: static.
Relative positioning is the same as static, except:
The Left, Right, Top, and Bottom nudge the positioning from their normal "static" position, and
Absolutely positioned elements will be positioned inside it.
All of that is to say that if you position your container as relative, the absolute positioning of the trans_caption will be in affect relative to your container, where now it is positioned relative to a more higher level container.
Also, absolute positioning will place your element at top: 0; left: 0; unless otherwise specified. You need to position your caption at bottom:0; to force it to the bottom of your container.
Your trans_caption will normally default to 100% width because <div> is a block-displayed element, so it makes sense that it didn't do anything with the example you've provided. This isn't the case with absolutely positioned items, however, so keep that line. If you then center the text within that <div> by styling it with text-align: center;, it should look the way you expect.

I think what you want to do is set the css background property on the container.
Something like this
<div id="container" style="float:left; width:200px; height:100px; background:url('{{ p.sizes.2.url }}') no-repeat; position:relative">
<span style="position:absolute;bottom:0px">Caption goes here</span>
</div>