Dynamic DIV

[DmitryAi]

Hi!

I have a next HTML-code:

SOME TEXT

and CSS-code for this:

.smi { height: 19.4%; }
.border { float: left; height: 100%; }
.bmid { width: 0;
overflow: hidden;
display: inline-block;
background: url(‘/img/mid.png’) no-repeat center;
background-size: 100% 100%; }
.bmid_anim { animation-name: smMiddleOn;
animation-timing-function: ease;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: forwards; }
@keyframes smMiddleOn { 100% { width: auto; } }

And of course it doesn’t work because “width: auto; ”
But I have a several “smi” divs with different texts.
How I can make dynamic middle div?

[Paulie_D]

A Codepen.io demo would be useful here.

[DmitryAi]

https://codepen.io/dmitry-ainutdinov/pen/bXeZbN

[Paulie_D]

Use max-width instead as you cannot animate auto width

https://codepen.io/Paulie-D/pen/rXLgYL

[DmitryAi]

Thanks a lot!

Using max-width instead width solved the problem.

Amazing :)

[DmitryAi]

Hi!

I’ve got another problem.
What’s goes wrong when I’m add a paddings left and right side?
:(

https://codepen.io/dmitry-ainutdinov/pen/bXeZbN

UPD:
Ok. Now I knew that max-width doesn’t take padding left and right.
But how it possible to fix?

[DmitryAi]

Ok.

I’m add a wrap with “width: fit-content;”
It’s work.

Don’t know is it best way?

[uxfed]

fit-content isn’t supported in IE or Edge. If you need to transition to an automatic width, a JS solution may be best.

[DmitryAi]

I trying to make it in other way with

<

table> tag.
But immediately I’ve got a first problem:
why text in the table cell with paddings get a new line?
https://codepen.io/dmitry-ainutdinov/pen/rNNOwNp

[Author]

Posts