We Keep Coding

div size increases after drag and drop

Here is my jsfiddle: My fiddle
After I drag and drop the "rule/event" class to "layout" class, I want the size of "rule/event" to be the same as in "rule-body/event-body" class.
It is multiplying in size when dropped into the "layout" class.
Is it because "rule-body/event-body" and "layout" classes have heights in different percentages(%)?
.rule-body, .event-body{
height: 85%;
margin-top: 5%;
overflow-y: scroll;
}
.layout{
height: 100%;
background-color: #ececec;
}
What is the fix for this?
Any help would be much appreciated. Thanks!

Since you are using height: 8%; width: 50%; those rules are related to the parent height/width, after drag and drop the parent changed, therefore, you have a different result of height/width.
Use fixed width/height or use vw/vh
Solution: https://jsfiddle.net/dalinhuang/0tdnmghr/
.rule{
height: 25px;
width: 100px;
background-color: #aaa;
text-align: center;
margin-bottom: 5%;
border: 1px solid black;
}
.event {
height: 25px;
width: 100px;
background-color: #aaa;
text-align: center;
margin-bottom: 5%;
border: 1px solid black;
}

div going out of parents div

i have a question about a div being longer then it's parent div.
My page is looking as followed:
<div id="wrapper">
<div id="top">
</div><!--/top-->
<div id="middle">
<div id="keep_up">
<div id="thread_menu">
<div id="new_thread">
New threads in here
</div>
<div id="active_thread">
Active threads in here
</div>
</div>
</div><!--/keep_up-->
</div><!--/middle-->
<div id="bottom">
</div><!--/bottom-->
</div>
And the css (Will skip the top div since that is working fine).
html,body {
margin: 0;
padding:0;
height:100%;
}
#wrapper {
min-height:110%;/*Did this, so the page will be a little longer already*/
position:relative;
}
#middle{
width: 80%;
margin-left: 10%;
padding-bottom: 30px;
}
#bottom {
color: white;
background:#000;
width:100%;
height:20px;
position: absolute;
bottom:0;
left:0;
text-align: center;
font-weight: bold;
}
#thread_menu{
float: left;
width: 17%;
}
#new_thread{
height: 80%;
width: 100%;
border-left: 2px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#active_thread{
height: 80%;
width: 100%;
margin-top: 5%;
border-left: 2px #000 solid;
border-bottom: 2px #000 solid;
border-right: 2px #000 solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
Now, i fill the active and new_thread div with 15 items that i retrieve from my database. Same with Active_thread div. However, on a big screen the results will show fine (As it should). But on a small screen (laptop) it shows it like this:
(The browser is not that big, you always need to scroll a little bit down in order to see the footer (See height: 110% in wrapper))
Question: how do i make my thread_menu push the footer down and keep it inside my wrapper or at least middle div?
(Used the tags Jquery and Javascript because i'm not sure how to solve this problem, and it might needs one of those).
Image EDIT:

Looks like #threadMenu is floated left, this pulls the element out of the flow of the document, so it will not effect the containing divs height!
You could use JS to get the #threadMenu height, then push the content down by this much, but thats not an ideal solution!

I'm assuming the 'menu-items' on the image is the #thread_menu in the CSS. When you float something in the CSS, you're taking it out of the flow. Meaning they won't listen to what it's parents has to say.
What you can do is use display: flex; flex-direction: row; on the middle, force #thead_menu to use a base of 17% by using flex: 0 0 17%.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for detailed information on how to use flexbox

Remove the following styles from #bottom
position: absolute;
bottom:0;
left:0;
Add a clearfix for #keep_up (see examples mentioned by Michael_B)
#keep_up:after {
content:"";
display:block;
clear:both;
}
JSFiddle Link
Note: changed id="Middle" to id="middle" in your fiddle example

Active Page Triangle Marker in CSS

I'm looking to create an active page marker like the one pictured. The title probably doesn't do a great job of describing what I'm trying to do here.
What I'm looking for is a border that has an curved triangle active page marker using CSS.

Here is a simple solution using to <div> tags only.
Setting the width of both container wil set the triangle on different placeses.
body {
margin:0;
width: 100%;
}
* {
box-sizing: border-box;
}
.right {
float: left;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 40px 0;
}
.left {
float: right;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 0 40px;
}
<div class="right"></div>
<div class="left"></div>

This is a relatively simple way to achieve the result using a single corner border radius on two small divs with a bottom border - to move the 'triangle', you only need to adjust the left position of the `container' element. It's not perfect, as the border fades towards the tip of the pointer, but it may pass the aesthetics test:
#line {
border-bottom: 3px solid #888888;
position: relative;
width: 500px;
height: 53px;
}
#container {
position: absolute;
bottom: -2px;
left: 200px;
width: 100px;
background: #ffffff;
}
#left,
#right {
float: left;
border-bottom: 3px solid #888888;
height: 50px;
}
#left {
width: 50px;
border-radius: 0 0 50% 0;
}
#right {
width: 50px;
border-radius: 0 0 0 50%;
}
<div id="line">
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
EDIT: The display in the sandbox seems to be inconsistent - here's a FIDDLE

You could play with before, after & border-radius to achieve it.
See an example here: http://codepen.io/anon/pen/RNqPpy

Construct a "3D" bulding using HTML, CSS and JS

This question is to broad, I know, but anyway...
How can I achieve the same result as the image below using HTML, CSS and JS (maybe images)? The number of "levels" are unpredictable and every "level" of the building must be clickable, an , or something like this.
Is that possible?

I build something with css transformations. Not perfect but i guess you'll see the point. It's using transformations for the roof and the side elements and adds the side elements through a pseudo class.
#stack {
padding: 10px;
}
.roof {
width: 100px;
height: 20px;
background: #aff;
transform: translateX(10px) skewX(135deg);
padding-top: -20px;
}
.level {
text-align: center;
width: 100px;
height: 20px;
background: #99f;
margin: 1px;
}
.level:after {
display: block;
width: 20px;
height: 20px;
background: #00f;
content: "";
margin-left: 100px;
transform: translateY(-30px) skewY(135deg);
}
.level:hover {
background: #f99;
}
.level:hover:after {
background: #f00;
}
<div id="stack">
<div class="roof"></div>
<div class="level">1</div>
<div class="level">2</div>
<div class="level">3</div>
<div class="level">4</div>
</div>
Feel free to use links inside of the levels.
Edit: added :hover highlighting

You have to play a bit with css transform and pseudo elements.
Just a quick and dirty example:
a {
display:block;
width:100px;
background:blue;
height: 30px;
line-height:30px;
color: #fff;
text-align:center;
margin-bottom:2px;
position:relative;
}
a:after {
position:absolute;
content:"";
background:darkRed;
height: 20px;
width: 42px;
right: -36px;
top:-2px;
transform: skew(-45deg) rotate(45deg);
}
div {
padding:100px;
}
<div>
one
two
three
four
</div>

Yes, it is possible
you can use canvas or SVG

Header image that extends and "curls" down into content past the left and right margins

I've searched a while for help on what I'm trying to do, but I have come up short. I'm a relative newbie so it's entirely possible that I'm using the wrong search terms. What I'm trying to accomplish is at
How do get the "wavy" line to extend past the left and right borders of content div (using only css, javascript and html)? Any help would be greatly appreciated. Thank you in advance for your help!

I first started with this:
.container {
height: 200px;
width: 200px;
background: lightgray;
position: relative;
overflow:hidden;
display:inline-block;
}
.container:before{
content: "";
position: absolute;
width: 80%;
height: 50%;
top:-25%;
left:-25%;
background:red;
border-radius:50%;
box-shadow:0 8px 0 black;
border-bottom:10px solid white;
}
.red {
position: absolute;
height: 21%;
width: 60%;
right:0;
overflow:hidden;
background: red;
z-index: 5;
}
.red:before {
content: "";
position: absolute;
width: 100%;
height: 50%;
bottom:-25%;
background:lightgray;
border-top:2px solid black;
box-shadow:inset 0 5px 0 white, inset 0 10px 0 black;
border-radius:50%;
}
<div class="container">
<div class="red"></div>
</div>
<div class="extra"></div>
But then ended with this (due to time constraints). You may want to look into borer-image in order to make the fading possible:
body{background:black;}
.container {
height: 200px;
width: 200px;
background: lightgray;
position: relative;
z-index: 5;
}
.container:before {
position: absolute;
content: "";
height: 60%;
width: 60%;
border-radius: 50%;
background:transparent;
border-right:8px solid white;
right: -20%;
top: 17%;
transform: rotate(-30deg);
}
.container:after{
position: absolute;
content: "";
height: 18%;
width: 100%;
background:red;
border-bottom:5px solid white;
}
<div class="container"></div>

If I understand you correctly. You want to place an image in a div, but the image i.e. the curvy line should extend outside it, right?
If yes, try this http://jsfiddle.net/9zzjhevy/1/
<div class="container">
<div class="img-container">
<img src="http://www.clker.com/cliparts/A/m/O/C/a/r/curve-md.png" />
</div>
</div>
.img-container{
display: table;
border: 2px solid;
max-width: 150px;
margin-left: 50px;
background-color: #000;
}
img{
margin-left: -50px;
}
I couldn't use the image you gave so picked random png image.

Draw each element on Adobe Illustrator and view the source. Then use necessary parts for your HTML5 SVG shape. You will be able to select them and change their style.
Here's how:
Draw the image on Illustrator
Go to File->Scripts->SaveDocsAsSVG (on Mac OS X, but on Windows it should be similar). Then you will be able to open the file in a text editor and get elements. I think some other vector graphics programs also allow you to view the source in SVG format.
Put the SVG markup in your HTML.
EDIT:
If I misunderstood your question and you want a bitmap image (.png or .gif with a transparent background) to be wider than content and have a part BELOW the content div, you will need to create three layers with different z-index values. Also, the image should be split into two parts - one for front div and other for back div. The div in between will look like entangled by the line.