Preventing divs from clearing inside an animated container

Question

I have a horizontal jQuery animated slider which works great, except as its width begins to decrease, no matter how I set up the <divs> inside they go to newline. I want them to stay on the same line to create this smooth illustion.

Here's what I mean: jsfiddle

How do I prevent them from clearing?

Hemant · Accepted Answer · 2017-03-08T19:11:19.953

1

use max-width instead of width:

 #container { max-width:500px; height:500px;border:2px dotted maroon; }
    .red, .blue, .green { display:inline-block;max-width: 250px; height:50px; margin:0 auto;}

here is the jsfiddle link

UPDATE: to avoid clear try jsfiddle

edited Mar 08 '17 at 19:11

answered Mar 08 '17 at 18:35

Hemant

1,961
2
17
27

Thanks for the answer. I must not have been clear. I want them to act as if `clear:both` – dsp_099 Mar 08 '17 at 18:46
In your example as soon as there's no room they "collapse" under each other if that's the right terminolog – dsp_099 Mar 08 '17 at 18:46
that's EXACTLY what I wanted. – dsp_099 Mar 08 '17 at 19:45
can you explain how that works? i still havea few floats that are misbehaving – dsp_099 Mar 08 '17 at 19:49
thats bcz max-width is set to 50% of the parent container.whatever be the its width the inner elements they will resize to half of its width(parent container) – Hemant Mar 08 '17 at 19:50

Preventing divs from clearing inside an animated container

1 Answers1

Linked