We Keep Coding

How to adjust a floating div based on its height and surroundings?

Disclaimer: The following code is using the rubuxa plugin for JS sortables.
Javascript:
function qs(expr){return document.querySelector(expr)}
var container = qs('.ITEST');
var sort = Sortable.create(container, {
animation: 350,
draggable: ".draggable",
});
CSS:
.draggable{
color: #fff;
margin: 1px;
float: left;
display: inline-block;
}
.ITEST{
width:425px;
height:400px;
margin:auto;
border:1px solid grey
}
http://jsfiddle.net/g8o0upLq/9/
The problem lies when dragging the red squares, they move correctly, but they do not stack vertically ontop of each other but horizontally. This creates unwanted extra white space underneath. I have tried to set the same height for all divs, but with no luck.

i just saw your post through Rubaxa's Github.
Anyways, there is no way you can achieve this with pure CSS. Even with Flexbox i can't think of a way you can do this.
For accomplish this behaviour you need some way of javascript to calculate absolute positioning.
The Library http://packery.metafizzy.co/ does a good job for this. It uses 'jQuery UI draggable' or 'Draggabilly' which uses absolute positioning.
The downside, i don't think there is a way to make this happen with Rubaxa's Sortable...

Create an irregular border

I am trying to create an irregular border around a div, the div will contain text. I am currently using two different images and making them background on the top and bottom of the div. This method works out pretty well but the problem is the div can grow, i.e. it can have variable width and height depending on its content. So, in this case using images as background to achieve this effect is no longer viable.
Is there any way to create an irregular border using CSS and javascript? Obviously, the border should accommodate variable width and height.
I am trying to achieve something like this, but on all sides.

I'd try background-size:contain using that image and then add some padding too keep the text away. It'll scale but it might look pixelated if the box gets too large. Otherwise, you'd need to make the edges repeatable which is probably near impossible given the image you've supplied.
PS. Reminds me of the days we all wanted rounded corners and now we flat design barely uses the border-radius property.

Use a background image for the div itself and CSS border-image for the borders. Here's an example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image
You can also use 2-3 divs to achieve what you are trying to do. Create an image which has the top decoration you want and set that as the background image. Then get another image with your side design, which is repeatable, but not so small that the pattern becomes apparent, and use that as the image with repeat-y enabled. Something like this
.image-top {
background: img(url) no-repeat;
min-height: 25px;
}
.image-middle {
background: img(url2) repeat-y;
}
<div class="image-top">
</div>
<div class="image-middle">
content goes here
</div>
or
.image-top {
background: img(url) no-repeat;
min-height: 25px;
}
.image-middle {
background: img(url2) repeat-y;
}
.image-bottom {
background: img(url3) no-repeat;
min-height: 25px;
}
<div class="image-top">
</div>
<div class="image-middle">
content goes here
</div>
<div class="image-bottom">
</div>

Make Vertical Line With HTML CSS or JavaScript

I've noticed vertical lines like in the website trippeo.com if you scroll down to where it says "increase traveler loyalty..." and then has a vertical line below. How would you create a long line like that in web design? Would you need to make an image and absolute position it or is there a better way with HTML, CSS, and or JavaScript?

You can do in two ways:
Background Image aligned to right and repeated across y-axis.
.main-liner {background: url("bg.png") repeat-y right top transparent;}
Border
.main-liner {border-right: 2px solid #f00; margin-right: -2px;}
Preview:
Fiddle: http://jsfiddle.net/praveenscience/RU42F/

script line with pointers when you click on it

I'm trying to figure out what is the right term for it so I can research more into and learn.
I encountered this tab, where you click on one the heading the blue line and a pointer pop up to point towards the tab content... (for example when you click on Books, and then click on Articles, etc etc..
Here is the example..
http://www.sutherlandlibrary.com/tabs/library-tabs-v4.htm
I want to know how you can create that. Or what is it ? so I can start researching into it.
Thanks in advanced, I know I'm suppose to search for it first, But i dont know where to start.
Cheers

Look for CSS3 shapes, for the actual pointy-thing.
There are plugins in ever major framework for creating tabs, or you can create a custom one with some jQuery. You'll need .on('click, ...) and .fadeIn/.fadeOut
For the tab-view use the CSS position: absolute on each tab-content inside a container with position: relative.
(community wiki because I didn't actually do any work)

The one from the page you posted uses a simple image for an <li>element which has the class .current on click (jQuery).
That image is positioned with a background-position: center bottom; and overlays the horiz. azure line.

Demo: http://jsfiddle.net/trevordixon/hvBpF/
Each tab is a <li>, and the currently selected tab has a class current. You'll see they have the following CSS rule:
.tab-features .tabs-list .current {
background: url("images/feature-tab-arrow.gif") no-repeat center 27px;
}
So the tab that has the current class has a 27px tall arrow image positioned just below the bottom of the tab. They could have also done something like this instead of using a background image:
.tab-features .tabs-list .current:after {
content: "";
width: 0;
height: 0;
/* These borders make it a triangle */
border-left: 14px solid transparent;
border-top: 14px solid #0088aa;
border-right: 14px solid transparent;
}
So to implement something like this, find a good tabs script or plugin, and style the currently selected tab like that.

Trouble making a facebook like div with triangle on top

on facebook if you hover over something with a lot of likes a div pops up showing everyone who likes the post. i was wondering if anyone could mimic the div in css and explain how i can do it. there is a picture below showing what i mean. i know you have to use a :after in css but im not sure how to position the triangle and all that.
Here is some code i found somewhere else:
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}

The code you pasted there has the gist of it down. You can see a working JSFiddle here that makes it more like what you're going for.
There are two parts to this problem, I think. The first part is making the triangle. The second part is positioning the triangle.
Making the Triangle
The borders on the pseudoelement are responsible for that triangle we're seeing. If you're not sure how that's happening, take a look at this great answer that explains it quite well, I think.
Positioning the Triangle
The key to positioning involves making the child appear outside of the parent. We can do this by setting absolute positioning on the child. However, if we do this without changing the parent at all, the absolute positioning will be set relative to the window.
What we want here is positioning the child relative to the parent. We can do this by setting the parent element's positioning to anything other than static, which is the default value. In the code you pasted, you can see they set it to relative. For more about positioning, the working docs are pretty explanatory, I think. Another great resource can be found on CSS Tricks.
Anyway, we want our child to be just outside the parent. Accordingly, if we have a 5px high triangle, the child's CSS for positioning should look something like:
position: absolute;
top: -5px;
This will make it appear like its attached to the top, as you can see in the above JSFiddle.
After you've positioned it vertically the way you want it to, set its left positioning to get it where you want along the horizontal.
Though of course you must ask yourself if it's worth reinventing the wheel—tooltips come with Bootstrap Jquery.