Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Dynamic DIV

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #293348
    DmitryAi
    Participant

    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?

    #293350
    Paulie_D
    Member

    A Codepen.io demo would be useful here.

    #293381
    DmitryAi
    Participant
    #293385
    Paulie_D
    Member

    Use max-width instead as you cannot animate auto width

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

    #293386
    DmitryAi
    Participant

    Thanks a lot!

    Using max-width instead width solved the problem.

    Amazing :)

    #294200
    DmitryAi
    Participant

    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?

    #294210
    DmitryAi
    Participant

    Ok.

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

    Don’t know is it best way?

    #294254
    uxfed
    Participant

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

    #297155
    DmitryAi
    Participant

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.