To get a div on top of another div. Even though the div is below the other div.

This can be solved easily if the divs have fixed height, say 20px.  Then you can do the following trick:

<div>
    <div style="width:200px;background:#F00;height:20px;margin-top:20px;"></div>  
    <div style="width:200px; background:#CCC;height:20px;margin-top:-40px;"></div>
</div>

What I did here is that added the margin-top to the below div in negative value. Not to mention that you must be good in calculations.

You can also use translateX and translateY CSS3 properties when the height is fixed and known.

What if the height is unknown?

If the heights of the div elements are not fixed or unknown, then it can be solved using javascript. (No way using pure CSS).

Here is the code:

<script>
 window.onload = function(){
    changePosition();
 }
 function changePosition(){
    var childOne = document.getElementById('childOne');
    var childTwo = document.getElementById('childTwo');
    // Getting the height of the elements
    var heightOne = childOne.offsetHeight;
    var heightTwo = childTwo.offsetHeight;
    // Giving marginTop to the first div equal to the height of the second div
    childOne.style.marginTop = heightTwo;
    // Giving the combination height of the two div's in negative
    // to the second div.
    childTwo.style.marginTop = -(heightOne + heightTwo);
 }
</script>

I hope this atleast gives you an idea about what to do when you have more than two div’s

To get the Largest width or height of the given array of elements

I have created a simple code which returns the largest width or largest height using jQuery. You can change this code to javascript easily ofcourse.

Here is the code:

$.fn.largerWidth = function () {    //function(p)  
                                    // where 'p' can be clientWidth or offsetWidth
                                    // or anything else related to width or height
    var s = this,m;
    for (var i = 0; i < s.length; i++) {
        var w = s[i].offsetWidth;   // s[i][p]; 
        (!m || w > m) ? (m = w) : null
    }
    return m;
}

Use the above code something like below:

 var largerWidth = $('ClassName').largerWidth();
 // or
 // if you want to pass arguments as shown in the above code
 // (in comments)
 var largerWidth = $('ClassName').largerWidth('offsetWidth');

jQuery UI Slider Example

Recently, I created a slider using jQuery UI. Many thanks to Stackoverflow.com because with no experience in jQuery-UI, I have done this slider just by searching on it. This is a simple slider example which is based on a single event of it i.e ‘slide’. If you want to have more sliders, then just edit the variable slideCount value. I hope the comments in between the code of lines will help you to understand what I did here. If you have any doubts or suggestions, please feel free to leave a comment below.

(Please attach your own image files in the place of stripeRed.png and stripeGreen.png in jQuery file)

Here is the code:

Centering the div’s inside a parent div (nested div’s)

A long time back, a user on stackoverflow asked a question to center nested child div’s inside a parent div. At that time, I stuggled hard for it and atlast got the solution just by using float:left and margin properties of css.

Here is the HTML code for it:

<div class="parent">
   <div class="child_one"> 
      <div class="child_two">
         <div class="child_three">
            <div class="child_four">
            </div>
         </div>
      </div>
   </div>
</div>

CSS

.parent{
    width:500px;
    height:500px;
    background-color:orange;
}
.child_one{   
    background-color:purple;
}
.child_two{
    background-color:pink;
}
.child_three{    
    background-color:yellow;
}
.child_four{
    background-color:red;
}
div>div{margin:10%;width:80%;height:80%;float:left;}

Here is the Fiddle (you can also use display:inline-block instead of float:left here)