Interesting float and flexbox technique


by Jeremy Caudle
code

I saw this interesting article, Float an Element to the Bottom Corner by Temani Afif, on CSS-Tricks a few days ago and I thought the technique looked interesting. I’m not entirely sure I’d be ok with the amount of divs I had to use to accomplish this effect, but it may be useful someday.

1-bit Jeremy Caudle

For more than 20 years I have been learning about the web and working on websites. My first website existed only on an old 100 MHz PC, and any images I had were either made by me or downloaded from the web onto a floppy disk wherever I could get access. I didn't have an internet connection at home, but I made the best of every opportunity to get online. My first exposure to HTML was within a book, HTML 4 for the World Wide Web by Elizabeth Castro, at my local library. That book started my obsession with building for the web and I'm still actively learning about it today.

View the code:

HTML and JS 
<div class="code-block">
            <div class="float-wrapper">
                <div class="box">
                    <div class="float"><img src="https://jeremycaudle.com/ygg/resources/onebitme.png" alt="1-bit Jeremy Caudle"></div>
                    <p>For more than 20 years I have been learning about the web and working on websites. My first website existed only on an old 100 MHz PC, and any images I had were either made by me or downloaded from the web onto a floppy disk wherever I could get access. I didn't have an internet connection at home, but I made the best of every opportunity to get online. My first exposure to HTML was within a book, HTML 4 for the World Wide Web by Elizabeth Castro, at my local library. That book started my obsession with building for the web and I'm still actively learning about it today.</p>
                </div>
            </div>
        </div>
CSS 
.code-block {
                display: block;
                margin: 2rem auto;
                padding: 1rem;
                width: 20em;
                height: auto;
                background-color: #eee;
                border-radius: 1rem;
            }

            @supports (display: flex) {

                .float-wrapper {
                    display: flex;
                }

            
                .float {
                    display: flex;
                    align-items: flex-end;
                    float: right;
                    height: 100%;
                    shape-outside: inset(calc(100% - 100px) 0 0);
                    margin-left: .5rem;
                }

                .float img {max-width: 100px; max-height: 100px; border-radius: 1rem; border: solid 1px #00000099; background-color: greenyellow;}

            }

Tags