How should I use floating elements?

[jtppragg]

I am trying to display a table floating right and let the slide text wrap around it, however the CSS float property seems to be ignored (I am using the default theme) and the table is displayed below the text:

<style scoped>
    table {
        float: right;
    }
</style>

# Slide title

Long slide text that should wrap around the table ...

|Header 1|Header 2|
|--------|--------|
|Content |Content |
|Content |Content |

[yhatt]

<section> slide container in default theme is the flex container, and its direct children are flex items. In general, float will be ignored in flex items.

https://stackoverflow.com/a/39194800

[jtppragg]

So, there is no way then? I have tried:

<style scoped>
    table {
        display: flex;
        justify-content: flex-end;
    }
</style>

And the table is now displayed at the right but below the text (instead of having the text wrapped around).

Thanks!

[yhatt]

Float will work by disabling flex container in section.

<style scoped>
    section {
        display: block;
    }
    table {
        width: max-content;
        float: right;
    }
</style>

Instead, contents will not be able to align vertically center. You must take either one.
https://github.com/orgs/marp-team/discussions/50#discussioncomment-10640565

[jtppragg]

Great, now it works as I expected!

[yhatt]

UPDATE: Baseline 2024 browsers allow centering contents vertically within the block layout. In new Marp Core v4, the default style of slide containers will be display: block, that is compatible with float CSS property + vertical centering behavior.

• Changes in new Marp Core v4 🚀 #533