Develop Reference

How to reduce the range space of scrollbar to be different from the div height?

I want to resize the space where the scrollbar moves.
I don't want it to affect how much I can scroll.
Look at the following pictures (my drawings) to better understand what I mean.
I'm using chrome so webkit is viable.
Thanks to all of your answers!
(P.S. I would love to have reduce the image size, yet I don't know how to! My apologies!).

Without nesting another element and play with its height you could simply use a huge border-bottom and place a visible border around the element using the outline property, e.g.
div {
width: 200px;
height: 300px;
outline: 1px #9bc solid;
border-bottom: 50px transparent solid;
}
Codepen demo
Result

You can't change the height of the scrollbar but you can redesign the scrollbar with -webkit-scrollbar like this:
::-webkit-scrollbar {
width: 5px;
height: 10px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #808080;
}

How Would I Make a Custom Scrollbar Apply Only to a Specific DIV Tag

Basically, I'm trying to setup a thinner scroll-bar for a Tumblr blog I need to do. How do I specify which div the scrollbar should effect, because I don't want the custom scrollbar (for the div) to replace the web-browser's default scrollbar (the scrollbar on the far right of your screen)?
Any suggestion? I saw the css for the new scrollbar, but it's all webkit, and without HTML, how do I single out which DIV I want it to affect?

You can style your scroll bar for any specific div as this example. I applied the custom scrollbar to the div with class="scroll"
However custom scrollbar css does not work in firefox. However you can use some custom jquery plugins for that (they may not be as good as the css ones but they do the trick) and here's question about that.
Here's a great article about what different properties and styles you can apply to your custom scrollbar.
Here's a fiddle
.scroll{
background-color:green;
width:100px;
height:200px;
overflow:scroll;
}
.scroll::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar{
width: 10px;
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar-thumb{
background-color: #000000;
border: 2px solid #555555;
}
<div class="scroll">
sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>
</div>

How to create gutters between pages in a fluid-width carousel?

I'm creating a custom carousel for my current project. Here's a simplified version (only tested in Chrome/Mac):
http://codepen.io/troywarr/pen/LpQzbv
Note that when the carousel scrolls, you can see that each page (1-5) butts up flush against its neighbor on the left and right sides (looking like a single double-thick border). I'd like to add a 5px-wide gutter between the left and right borders of each page so that the borders don't touch.
However, since this is a fluid-width carousel, this has proven to be more difficult than expected.
I need to support IE9+, so I can't rely on calc() values or CSS animations; I'd probably need to do this via jQuery .animate(), but when the horizontal position to which I'm animating is basically 100% + 5px, I can't figure out how to express that in code.
How would I go about that? Is there, perhaps, another clever way to set up the carousel that allows me to use margins, padding, table cell padding, etc. to my benefit? Or, any other ideas? I've played around with different approaches for a couple of hours and I'm running out of ideas.
UPDATE:
Just to clarify what I mean by "gutter" - I'd like there to be a 5px empty gap between the left and right sides of each page in the carousel. Each page should retain its own borders, but there should be empty whitespace between them (only noticeable on scroll). Here's an example that uses calc() and CSS transitions to do exactly what I want (only tested in Chrome):
http://codepen.io/troywarr/pen/GpQYPj
I just need to find a comparable solution that is compatible with IE9+ (which calc() and CSS animations are not).

Applying border-box to everything will allow you to add paddings without breaking the layout.
// See an explanation here:
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
EDIT:
Sorry, you were already doing this. Here is my take on it:
.window {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
// Add these two rules
// The idea is to make a static frame, except for the right column
// which is the one being repainted.
border: 5px solid #666;
border-right: 0;
}
...
.slider li {
float: left;
width: 20%;
height: 100%;
background-color: #ccc;
display: table;
border-right: 5px solid #666; // <- Paint the right column only
}

DIV with background image

We have applied the backgroud image(round corner image from web site) for DIV control. and then dynamically added more statement in DIV control.
How we will increase the height and width for the image?
Please give us some suggestions.

Try using css3
.div {
background: #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Or you will need to do all kinds of messy stuff like resizing the background image, or splitting them off into 'corners' and all that... a huge headache

Using javascript you can change the background-size.
Note - It's a CSS3 feature.
Within style tag
.div_class_name
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
when content changes in div you can use the following syntax to change the size
document.getElementById("eleId").style.backgroundSize="60px 80px" ;

Pure CSS equal height columns with border-bottom on hover?

I was hoping you could help me find a solution to a problem I'm having after trying out Matthew James Taylor's equal height columns using pure css.
I'm trying to add a border-bottom to a column when hovered over by the user (see image: 1). The problem I'm having is that as these DIV's are nested the borders seem to stack on top of eachother (see image: 3). I'm trying to have all the borders on an even level as the effect I'm going for would have them overlap with the gray line
Furthermore, the grey horizontal line in the image would stretch to 100% width of the page and would be on an even level with the black border-bottom. When not hovering over any of the titles (hi there!, contact, twitter) I'd like the columns with content to slide up until only the titles are visible, this would be the only thing I'd like to use Javascript. Perhaps all of this isn't possible using just CSS, or maybe there's a better way of doing it?
**

It looks like this would be solved far more easily with display: table than the CSS trickery you are currently using.
http://jsfiddle.net/rrPKA/
#container { display: table; }
.row { display: table-row; }
.row > div {
display: table-cell;
width: 100px;
border-bottom: 1px solid lightgray;
padding-left: 10px;
}
.row > div:hover { border-bottom: 1px solid gray; }