homepage-blog picture/name of author about owasp-layout

[scorchingoyster]

I thought it would be a pretty straightforward implementation, but after trying some things out and reading a lot of online community discussions—it seems that there isn't actually a good way to implement this without drawback.

surprisingly, "floating" the image to the bottom right while allowing the text to wrap around it isn't achievable without some hacky fix through javascript, and it's also limited by that the element won't be fluid and exact number of text lines will have to known so that the CSS/JS can account for it.

in short, CSS doesn't seem to have a good way to support this layout behavior at the moment.

I suggests moving the photo and the author information to top right or left instead. if you do prefer to keep it bottom left, we may be able to use one of the workarounds, but it will mean that there will be some significant limitations that come with it.

(details here: https://stackoverflow.com/a/499883)

[mikemccamon]

Sorry you had to do so much research - top right works! Mike McCamon | m: +1.913.940.2737 | Sent from iPhone

…

On Jul 15, 2019, at 8:00 PM, Scorching Oyster ***@***.***> wrote: I thought it would be a pretty straightforward implementation, but after trying some things out and reading a lot of online community discussions—it seems that there isn't actually a good way to implement this without drawback. surprisingly, "floating" the image to the bottom right while allowing the text to wrap around it isn't achievable without some hacky fix through javascript, and it's also limited by that the element won't be fluid and exact number of text lines will have to known so that the CSS/JS can account for it. in short, CSS doesn't seem to have a good way to support this layout behavior at the moment. I suggests moving the photo and the author information to top right or left instead. if you do prefer to keep it bottom left, we may be able to use one of the workarounds, but it will mean that there will be some significant limitations that come with it. (details here: https://stackoverflow.com/a/499883) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[scorchingoyster]

I actually do agree that the bottom right option looks better, it's what I often do with print layout as well. but CSS is another beast.

will do the top right option then.

[scorchingoyster]

your sketch seemed like you wanted to make use of the blue border that the news list, so I just replicated the effect for this:

without the photo and/or the author row, the text paragraph would just display as-is.

[mikemccamon]

Looks great!