Float An Element To The Bottom Corner

The Challenge

Modern web layouts often require elements positioned in corners while maintaining text flow around them. While CSS has evolved significantly with flexbox and grid, the classic float property remains uniquely suited for creating text-wrap effects around positioned elements. This guide explores how to combine float with shape-outside and flexbox to anchor images or elements in bottom corners without JavaScript.

Text wrapping around images is a classic print design technique that translates beautifully to the web. The challenge arises when you want that image not just at the top of the content, but anchored to a bottom corner while text flows around it naturally. Whether you're building editorial layouts, product cards, or magazine-style designs, this CSS-only approach provides creative possibilities without JavaScript dependencies.

Core Technique: Float + Flexbox + Shape-Outside

The solution combines three CSS features: the float property for positioning, flexbox for height calculation, and shape-outside to define the text wrap area. This technique works in all modern browsers and provides a performant solution for complex layouts. Our web development services team regularly implements these CSS techniques to create sophisticated layouts for client projects. For complementary techniques using pseudo-elements, see our guide on 7 Practical Uses For The Before And After Pseudo Elements In Css.

Markup Structure

The HTML structure requires a wrapper element containing a flex item (box), which in turn contains the floated element:

<div class="wrapper">
 <div class="box">
 <div class="float"><img></div>
 Lorem ipsum dolor sit amet...
 </div>
</div>

The .box within the .wrapper is our flex item. We don't need any particular CSS applied to the box itself. It defines the height of the wrapper and, at the same time, is stretched to the same height. This behavior gives us a "reference height" that can be used by child elements.

From the CSS Flexbox specification: "If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved." The keyword is the definite which allows us to safely use a percentage (%) height inside the box element. This specification-backed behavior ensures reliable cross-browser support for this technique.

The CSS Solution

.wrapper {
 display: flex;
}

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

Property breakdown:

• float: right -- Anchors the element to the right side, allowing content to wrap on the left
• height: 100% -- Spans the full height of the flex container, giving us the reference height
• display: flex; align-items: flex-end -- Pushes the image to the bottom corner of the container
• shape-outside: inset(calc(100% - 100px) 0 0) -- Creates the text wrap area that allows content to flow around the element

This CSS-first approach aligns with our commitment to building performant websites using modern CSS techniques. Unlike JavaScript-based solutions, this method requires no runtime processing and works seamlessly with server-side rendering. To learn more about CSS layout strategies, explore our comprehensive guide on CSS layout methods.

Understanding Shape-Outside and Inset()

The shape-outside CSS property defines a shape--possibly non-rectangular--around which adjacent inline content should wrap. By default, inline content wraps around an element's margin box; shape-outside provides a way to customize this wrapping behavior for creative layouts.

The inset() function defines an inset rectangle where all four arguments represent the top, right, bottom, and left offsets from the reference box inward. This allows precise control over the wrapping area.

With shape-outside: inset(calc(100% - X) 0 0) we create an inset rectangle that starts exactly at the top of the image. The top position equals 100% - X, where X is the image height and 100% is the height of the floated element. This calculation allows text to wrap within the free space above the image while leaving room at the bottom for the anchored element.

For more details on these CSS features, see the CSS-Tricks guide to floating elements to bottom corners.

Optimized Markup Approach

For simpler implementations, remove the wrapper div and apply styles directly to the image. This approach reduces HTML complexity while maintaining the same visual result:

<div class="wrapper">
 <div class="box">
 <img class="float">
 Lorem ipsum dolor sit amet...
 </div>
</div>

.float {
 float: right;
 height: 100%;
 width: 100px;
 shape-outside: inset(calc(100% - 100px) 0 0);
 object-fit: contain;
 object-position: bottom;
}

Since we removed the extra wrapper, we use object-fit and object-position to place the image at the bottom corner. This method requires knowing both width and height upfront, unlike the wrapper approach where only height is needed. Choose the method that best fits your specific use case and design requirements.

Related techniques for advanced layouts can be found in our guide on An Auto Filling Css Grid With Max Columns.

Advanced Variations

Center Positioning

Float an element to the right but pin it to the vertical center using justify-content: center, and adjust the inset rectangle accordingly:

.float {
 float: right;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: flex-end;
 shape-outside: inset(calc(50% - 50px) 0 0);
}

Multiple Corners

Place images at both bottom corners using two floated elements with opposing directions:

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

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

Non-Rectangular Shapes

Use gradients with shape-outside for creative layouts that break away from traditional rectangular shapes:

Rounded images with radial gradient:

.shape {
 shape-outside: radial-gradient(circle at center, transparent 50px, black 51px);
}

Triangular shapes with linear gradient:

.shape {
 shape-outside: linear-gradient(45deg, transparent 50%, black 50%);
}

These advanced techniques demonstrate the flexibility of shape-outside beyond basic inset shapes, enabling creative editorial layouts that stand out.

Decorative Images with Pseudo-Elements

For images that don't need to be in the HTML for SEO purposes, replace the .float element with a pseudo-element and apply the image as background. This approach keeps your HTML clean while achieving the same visual effect:

.box::after {
 content: "";
 float: right;
 height: 100%;
 width: 100px;
 shape-outside: inset(calc(100% - 100px) 0 0);
 mask: inset(calc(100% - 100px) 0 0);
 background: url(image.jpg) no-repeat center bottom;
 background-size: contain;
}

Using mask shows just the portion of the image needed, using the same value as shape-outside. This requires defining only one value for the shape, reducing code duplication and maintenance.

Important: When using the mask technique, add pointer-events: none to prevent the float element from blocking text interaction and selection. This ensures the content remains accessible and usable regardless of the visual overlay.

For production implementations, consider performance implications when using complex shapes and masks. Additionally, our guide on The At Rules Of Css covers other advanced CSS techniques that pair well with this approach.

Best Practices and Performance

Known Height Requirement

The primary limitation is knowing the image height. Solutions include:

• Use fixed dimensions for known images to ensure consistent layout behavior
• Use CSS custom properties for dynamic adjustment across breakpoints
• Consider responsive image approaches with media queries for different screen sizes

Performance Considerations

The shape-outside property is well-supported in modern browsers and has minimal performance impact for typical use cases:

• Use will-change sparingly and only when animations are specifically needed
• Test on target devices for complex shapes to ensure smooth rendering
• Complex shapes may impact rendering performance on lower-end devices

Browser Support

shape-outside is supported in all modern browsers:

• Chrome 37+
• Firefox 62+
• Safari 10.1+
• Edge 79+

Common Issues and Solutions

Conclusion

The combination of float, flexbox, and shape-outside provides a powerful CSS-only solution for placing elements in bottom corners while maintaining text wrap. From simple rectangular images to complex non-rectangular shapes, this technique offers creative possibilities for modern web layouts without JavaScript dependencies.

Key steps to remember:

1. Use flexbox for height reference and definite size calculation
2. Float the element and set height to 100% of the container
3. Use flex alignment to position content in the desired corner
4. Apply shape-outside with inset() to define the wrap area

For projects requiring sophisticated CSS layouts, our web development team has extensive experience implementing these techniques across diverse client requirements. For a deeper dive into advanced CSS capabilities, explore our comprehensive guide on The Other C In Css.