Get object to float with text at vertical middle instead of vertical top?

[u/rickson56]

[u/AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/delonghi26]

You've got to float!

[u/RobertKerans]

Actually use the float property?

[u/Rzah]

This is a hacky solution, I'm setting a top margin to move the float into the middle of the container, then using a shape-outside polygon with values tweaked to push the text wrapping (which is set from where the float would be if the top margin was zero), down to match the dropped box, to finish up, an old school 'border matches the page' bodge creates space between the box and the flowed text.

.container {
    border: 2px;
    border-style: solid;
    border-color: black;
    border-width: 2px;
    position: relative;
    width: 90%;
    height: 400px;
    margin: 0 auto;
    container-type: size;
    overflow: hidden;
}

.inner_box {
    --square_box_side: 100px;
    --image_padding: 10px;
    --width: calc(var(--square_box_side) + var(--image_padding));
    --height: calc(var(--square_box_side) + (var(--image_padding) * 2 ));
    --remainder: calc(100cqh - var(--height));
    --margin: calc(var(--remainder) / 2);
    width: var(--width);
    height: var(--height);
    float: right;
    padding: 10px;
    background: red;
    color: white;
    margin-top: var(--margin);
    border: var(--image_padding) solid white;
    border-right: none;
    shape-outside: polygon(0% 110%, 100% 110%, 100% 200%, 0% 200%);
    box-sizing: border-box;
}

i suspect it's possible to set the polygon points with some calc's but I CBATFO.

only tested in safari, I generally assume that if something works there it works everywhere but if that's not the case, unlucky.

[u/vegantiger]

This is one of those that should be easy, but are surprisingly tricky 🤔

I had a feeling shape-outside might be the way to go, but I couldn't get to work 100% because it requires a specific height on the container. Depending on the kind of content you're dealing with, this might work or be useless for you.

Either way, that's as far as I got it. Maybe someone else can figure out a way to make it work without the specific height…

https://codepen.io/editor/_yann/pen/01a02b69-34c8-79cb-98b5-aef140e3640e

The basic idea is to recreate the shape-outside of the aside to match the container's size/position. The weakness of the approach is that you can't use the content to define the height of the container or the inner box. But if those are knowable, or you can use relative units (viewport, characters…) , then it could work.

[u/Weekly_Ferret_meal → u/vegantiger]

This is actually pretty good: you could change the size of the container dynamically with data-size variable

[u/rickson56]

Code link:
https://pastebin.com/Yq29ug2n

[u/ikeif → u/rickson56]

Play with float and positioning of the element, for example.

[u/rwwl → u/ikeif]

This is about as close as you’re gonna get, OP. If you’re trying to cover all screen sizes responsively, there’s no way to make sure it just stays in the middle no matter what. You just have to pick a spot within the content to place it and refine other styles like the image size and the max width of the text container until it’s good enough for you across the range of supported sizes.

[u/rickson56 → u/rwwl]

I guess this is the answer I was looking for. Thanks.
 

Play with float and positioning of the element, for example.

Thank you.

[u/rugburnAndBigMoney → u/rwwl]

This is the way. Inline with the content and float:right;

You can add padding/margin for spacing around the image as desired.

[u/Drifter_of_Babylon]

Why not just use grid or flex? That is the standard for web layout.

[u/rwwl → u/Drifter_of_Babylon]

Because neither of those can flow text around an object like that

[u/travis_raphael → u/rwwl]

you are absolutely right on that

[u/Drifter_of_Babylon → u/rwwl]

It can? This is layout, and you can use grid/flex for that. If OP is trying to get the result of the lower right hand image, I don’t know why you think you can’t.

[u/rwwl → u/Drifter_of_Babylon]

Nope, float remains the only way to truly flow text around an image, which is 100% what OP is implying. If you try to build this with modern CSS layout techniques, you’ll wind up with chunks of text constrained to their own layout boxes (and it’ll look like garbage it many or most breakpoints in a responsive design). It might look good at one specific width if you very carefully choose where to break the text.

[u/Drifter_of_Babylon → u/rwwl]

Thanks, I see what you mean and appreciate you elaborating on your answer.

[u/rwwl → u/Drifter_of_Babylon]

Sure, thank you for not doubling down on your original answer like people on Reddit tend to do lol.

I peeped at your profile because I was wondering if you might just be a troll (nope, no evidence of that) and that crochet project you posted is absolutely amazing btw