CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Anoop
Anoop

Reputation: 173

How to keep the position of second div fixed even when the height of first div is increased

Kindly check this fiddle and tell me how I can keep the second <div> at the same position even when the height of first <div> is increased. If the first <div> overlaps the second it's fine. I just don't want the second div to move at all.

https://jsfiddle.net/7v9dud8u/

  <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- page content -->
<div id="main-div" style="background-color: #ae2477; width:300px; height: 100px;" onclick="expandHeight();">
    Main
</div>
<br/>
<div id="sub-div" style="background-color: #FF0000; width:300px; height: 100px;" onclick="reduceHeight();">
    Sub
</div>
<script>
    function expandHeight(){
        $("#main-div").animate({height:"200px"},400);
    }
    function reduceHeight(){
        $("#main-div").animate({height:"100px"},400);
    }
</script>

Thanks.

Upvotes: 1

Views: 254

Answers (3)

Steve Seeger
Steve Seeger

Reputation: 1477

Try similar answer:

http://fiddle.jshell.net/MvzFC/24/

CSS:

.userWrap {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 50px;
    overflow: visible;
    z-index: 1;
}
.userWrap:hover {
    z-index: 2;
}
.user {
    position: absolute; 
    display: inline-block;
    width: 300px;
    height: 50px;
    margin-bottom: 5px;
    background: #fff;
    transition: width 0.3s, height 0.3s;
}
.user:hover {
    width: 350px;
    height: 200px;
    background: #eee;
    transition: width 0.3s ease 0.5s, height 0.3s ease 0.5s;
}
.user img {
    float: left;
}
.user .name, .skills {
    margin-left: 5px;
}
.user .name {
    font-size: 21px;
    font-weight: bold;
}

Upvotes: 1

terrymorse
terrymorse

Reputation: 7086

If all you want is to keep the second div from moving, then some simple css will do. Just add this to the second div's style attribute:

position:absolute; top:130px;

Upvotes: 1

Ryan Dantzler
Ryan Dantzler

Reputation: 1144

Using CSS, you can use position: absolute;

<style>
    #main-div {
      position: absolute;
    }
</style>

Doing this will allow the two divs to move freely around the browser window without affecting one another.

Upvotes: 1

Related Questions