CODEWITHSUNDEEP
jqueryhtmlcss
Neil W
Neil W

Reputation: 9162

Animate div off screen to the right

With the following HTML:

<div id="container" style="width: 100%; overflow-x: hidden;">
  <div id="left" style="width: 50%; display: inline-block;">
  </div>
  <div id="right" style="width: 50%; display: inline-block;">
  </div>
</div>

I want to animate the left div to width: 100% and have the right div subsequently slide off to the right.

I thought that the overflow-x: hidden would work but the right div immediately drops below the left div as soon as the left div reaches 51%.

Any ideas please?

Upvotes: 0

Views: 94

Answers (1)

Kayasit R.
Kayasit R.

Reputation: 191

Use display: flex inparent div and set flex: 0 0 auto to avoid browser trying to fit the children within the parent

#container {
  width: 100%;
    overflow-x: hidden;
    display: flex;
}
#left {
  background-color: blue;
  height: 100px;
  width: 62%;
    flex: 0 0 auto;
}
#right {
  background-color: red;
  
  height: 100px;
  width:50%;
    flex: 0 0 auto;
}
<div id="container" >
  <div id="left" > </div>
  <div id="right" > </div>
</div>

Upvotes: 1

Related Questions