The div escapes the container and falls down to the one below it

Question

The div escapes the container and falls down to the one below it

I am encountering an issue with the layout of my outer container, which contains a column of numbers and animated text. The problem arises when the animated text, supposed to be beside the number column, drops under the numbers before bouncing back up as it reaches the outer container, eventually breaking out.

Despite attempting to use the word-wrap: property on the animated text div, I have not been able to resolve the issue. It seems like a combination of floats, overflows, and word-wrap might be the solution, but I cannot seem to find the correct mix.

The animation is being handled by typed.js plugin.

You can view a working example on this fiddle

javascript jquery html css

Answer 1

Answer №1

By removing the display: inline-block property from the code-block class, it seems to eliminate the issue of the code block jumping below the line numbers. However, due to the way the JS script adds and removes characters, there may still be a brief moment of jumping when lines are added or removed, though this may not be directly related to the initial problem.

Edit 1

It appears that the culprit causing the temporary jump is the white-space:pre attribute on the span containing the text input. Changing this to white-space: pre-line; seems to resolve the jumping problem.

To address this issue, I would recommend two simple adjustments:

Remove the display: inline-block; from the .code-block class; and
Replace white-space: pre; with white-space: pre-wrap for the span housing the code input.

To see the changes in action, check out this fiddle: jsfiddle

Answer 2

By removing the display: inline-block property from the code-block class, it seems to eliminate the issue of the code block jumping below the line numbers. However, due to the way the JS script adds and removes characters, there may still be a brief moment of jumping when lines are added or removed, though this may not be directly related to the initial problem.

Edit 1

It appears that the culprit causing the temporary jump is the white-space:pre attribute on the span containing the text input. Changing this to white-space: pre-line; seems to resolve the jumping problem.

To address this issue, I would recommend two simple adjustments:

Remove the display: inline-block; from the .code-block class; and
Replace white-space: pre; with white-space: pre-wrap for the span housing the code input.

To see the changes in action, check out this fiddle: jsfiddle

Answer 3

Answer №2

To make the width smaller than the main container, try using em instead of px:

.code-block {
    display: inline-block;
    padding-top: 3px;
    width: 30em;
}

Just a heads up, changing to em didn't have an impact on the appearance but did improve performance and reduced code length:

$(function(){
    $(".code-animate").typed({
        strings: ["    <p>Lorem ipsum dolor sit amet, ei sit atomorum forensibus, pro ad denique vituperata. His ni.</p>"],
        typeSpeed: 1,
        backSpeed: 50,
        contentType: 'text',
        loop: true
    });
});

See the working fiddle below:

https://jsfiddle.net/gjab03dx/8/

I had to eliminate word wrapping for it to function properly - quite an interesting challenge! Now I'm eager to tackle the remaining issues!

Answer 4

To make the width smaller than the main container, try using em instead of px:

.code-block {
    display: inline-block;
    padding-top: 3px;
    width: 30em;
}

Just a heads up, changing to em didn't have an impact on the appearance but did improve performance and reduced code length:

$(function(){
    $(".code-animate").typed({
        strings: ["    <p>Lorem ipsum dolor sit amet, ei sit atomorum forensibus, pro ad denique vituperata. His ni.</p>"],
        typeSpeed: 1,
        backSpeed: 50,
        contentType: 'text',
        loop: true
    });
});

See the working fiddle below:

https://jsfiddle.net/gjab03dx/8/

I had to eliminate word wrapping for it to function properly - quite an interesting challenge! Now I'm eager to tackle the remaining issues!

The div escapes the container and falls down to the one below it

Answer №1

Answer №2

Similar questions

Attempting to retrieve XML/JSON

Accessing vector features by clicking in close proximity to, but not directly on, a vector in OpenLayers

The "next" button on my carousel is unresponsive and the automatic transitioning feature is not working

What is the best way to design a grid consisting of 14 divs that span the entire width of the browser screen, incorporating dividers to separate different groups, utilizing a combination of html,

Validation of HTML5 forms using jQuery

"Enhance your Vue.js application with the powerful capabilities of vue3-easy

Tips for configuring Webstorm to automatically change double quotes to single quotes when reformatting source code

Animating SVG from upper left corner to lower right corner

When using PHP submit, the text input from dynamically generated JS fields is not being posted

The YUI framework is skilled at creating new lines while erasing the old ones

The text relentlessly presses the button within the confines of bootstrap

What causes the data property to supersede the return false in a jQuery ajax call?

Create a list item that includes an image with a corresponding label positioned beneath it

Centering the scrollIntoView feature on mobile devices is presenting challenges with NextJS applications

Ways to access the values of checkboxes that are initially checked by default

Modify the icon in the header of MaterializeCSS Collapsible when it is opened

Adding fresh data to a C3.js line graph

Deciphering image coordinates provided for incorporating an animated image component into a form

Adjust link when scrolling through the webpage

Transferring data between functional components in ReactJS and dealing with the output of [object Object] or undefined