Sizing of float tags

[pokken]

I have some formatting that I would like to do that I feel almost like I need to have control over the size of the float tags. I am kinda hacking it with negative margins right now but that seems...not desirable.

What I want is boxes that float left or right and are wrapped around by text, but to be able to control the size of the boxes. The behavior that happens is that when you float a box to the right it autosizes the float and the box can then only be sized relative to the random size of the float.

What I'd like is to be able to do is set the sizing of the float div so that it just fills say, 30% and has reasonable margins, then I set the box and image to 100% and they fill the float

Here's a quick demo with good boxes and bad boxes:


BAD BOX had unnecessary padding on the left side

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac nisl convallis lorem mollis consectetur in sed augue. Pellentesque aliquam, magna id euismod convallis, tellus lorem accumsan dolor, eget fringilla ex urna eget sem. Suspendisse malesuada nisl lorem, non vestibulum dolor lacinia a. Fusce volutpat euismod rhoncus. Maecenas sem diam, hendrerit varius turpis nec, fermentum vestibulum libero. In quis faucibus orci. Aliquam a purus at nisi molestie iaculis. Nulla et erat dolor. Fusce quis sagittis diam, non aliquam sapien. Quisque eget auctor libero. Sed rhoncus et urna non sagittis. Donec posuere nunc nec faucibus pretium. Donec risus eros, consectetur eget feugiat sit amet, scelerisque posuere est. Ut malesuada purus in massa aliquet, sed ultrices lorem commodo. Vivamus non laoreet lectus. Duis vel nibh ac ipsum aliquam commodo.

Ephara Creatures

Quisque condimentum fringilla nibh, eget porttitor lectus consectetur et. In neque ligula, ultricies et enim quis, auctor fringilla lacus. Sed rhoncus, nulla dictum placerat ornare, mauris metus ultricies nibh, nec condimentum tellus ligula vestibulum lacus. Vivamus odio leo, scelerisque sit amet tellus ac, iaculis dapibus justo. Quisque vitae ornare ipsum. Suspendisse pulvinar dictum leo eu imperdiet. Nulla dolor risus, lobortis eget faucibus in, dignissim ut quam. Duis lacus risus, dictum vitae ultricies eu, luctus eget sem. Donec gravida neque et felis blandit, quis condimentum dolor fermentum. Duis sagittis, tortor ut pharetra condimentum, tortor ligula varius lorem, ut dictum libero eros vitae nibh. Proin imperdiet leo et hendrerit commodo.

Vestibulum lacus tellus, ullamcorper in odio sed, semper tincidunt dui. Maecenas elit orci, imperdiet a tempor non, tempus quis nisl. Phasellus dictum quam lacus, et ultrices massa scelerisque at. Nam ut euismod dui, sed vulputate ipsum. Aenean laoreet id nisl nec laoreet. Vivamus mattis pharetra mi ut finibus. Donec convallis odio aliquet, mattis neque et, posuere ex. Fusce purus felis, vulputate ac velit non, congue suscipit lectus. Praesent ex mauris, dictum sed dolor vel, posuere feugiat erat.

Mauris maximus, massa euismod gravida malesuada, nibh urna efficitur ex, vestibulum viverra lacus enim a orci. Etiam iaculis eros sodales tellus convallis, vitae molestie nulla finibus. Fusce condimentum diam volutpat nisi egestas, sit amet vestibulum ipsum vehicula. Nulla tellus diam, fermentum eget sollicitudin quis, volutpat sed nibh. Pellentesque dictum justo et dolor egestas, eget porta turpis fringilla. Nam feugiat hendrerit quam sed tincidunt. Quisque posuere ex vitae ipsum elementum dapibus. Cras vehicula mauris ipsum, eget ultrices erat pellentesque eget. Fusce aliquam ante ex, et hendrerit sapien tincidunt eget. Quisque non eros id est semper placerat in et nibh. Suspendisse at laoreet neque. Phasellus ut massa pharetra, consectetur nibh ac, pellentesque lorem.


GOOD BOXES

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac nisl convallis lorem mollis consectetur in sed augue. Pellentesque aliquam, magna id euismod convallis, tellus lorem accumsan dolor, eget fringilla ex urna eget sem. Suspendisse malesuada nisl lorem, non vestibulum dolor lacinia a. Fusce volutpat euismod rhoncus. Maecenas sem diam, hendrerit varius turpis nec, fermentum vestibulum libero. In quis faucibus orci. Aliquam a purus at nisi molestie iaculis. Nulla et erat dolor. Fusce quis sagittis diam, non aliquam sapien. Quisque eget auctor libero. Sed rhoncus et urna non sagittis. Donec posuere nunc nec faucibus pretium. Donec risus eros, consectetur eget feugiat sit amet, scelerisque posuere est. Ut malesuada purus in massa aliquet, sed ultrices lorem commodo. Vivamus non laoreet lectus. Duis vel nibh ac ipsum aliquam commodo.

Philosophy Summary

• Play creatures over non-creatures even if slightly worse.
• Skip out on card draw for more control
• Mana efficiency is paramount
• Token generation should be either free or at instant speed

Quisque condimentum fringilla nibh, eget porttitor lectus consectetur et. In neque ligula, ultricies et enim quis, auctor fringilla lacus. Sed rhoncus, nulla dictum placerat ornare, mauris metus ultricies nibh, nec condimentum tellus ligula vestibulum lacus. Vivamus odio leo, scelerisque sit amet tellus ac, iaculis dapibus justo. Quisque vitae ornare ipsum. Suspendisse pulvinar dictum leo eu imperdiet. Nulla dolor risus, lobortis eget faucibus in, dignissim ut quam. Duis lacus risus, dictum vitae ultricies eu, luctus eget sem. Donec gravida neque et felis blandit, quis condimentum dolor fermentum. Duis sagittis, tortor ut pharetra condimentum, tortor ligula varius lorem, ut dictum libero eros vitae nibh. Proin imperdiet leo et hendrerit commodo.

Vestibulum lacus tellus, ullamcorper in odio sed, semper tincidunt dui. Maecenas elit orci, imperdiet a tempor non, tempus quis nisl. Phasellus dictum quam lacus, et ultrices massa scelerisque at. Nam ut euismod dui, sed vulputate ipsum. Aenean laoreet id nisl nec laoreet. Vivamus mattis pharetra mi ut finibus. Donec convallis odio aliquet, mattis neque et, posuere ex. Fusce purus felis, vulputate ac velit non, congue suscipit lectus. Praesent ex mauris, dictum sed dolor vel, posuere feugiat erat.

Mauris maximus, massa euismod gravida malesuada, nibh urna efficitur ex, vestibulum viverra lacus enim a orci. Etiam iaculis eros sodales tellus convallis, vitae molestie nulla finibus. Fusce condimentum diam volutpat nisi egestas, sit amet vestibulum ipsum vehicula. Nulla tellus diam, fermentum eget sollicitudin quis, volutpat sed nibh. Pellentesque dictum justo et dolor egestas, eget porta turpis fringilla. Nam feugiat hendrerit quam sed tincidunt. Quisque posuere ex vitae ipsum elementum dapibus. Cras vehicula mauris ipsum, eget ultrices erat pellentesque eget. Fusce aliquam ante ex, et hendrerit sapien tincidunt eget. Quisque non eros id est semper placerat in et nibh. Suspendisse at laoreet neque. Phasellus ut massa pharetra, consectetur nibh ac, pellentesque lorem.


Mauris maximus, massa euismod gravida malesuada, nibh urna efficitur ex, vestibulum viverra lacus enim a orci. Etiam iaculis eros sodales tellus convallis, vitae molestie nulla finibus. Fusce condimentum diam volutpat nisi egestas, sit amet vestibulum ipsum vehicula. Nulla tellus diam, fermentum eget sollicitudin quis, volutpat sed nibh. Pellentesque dictum justo et dolor egestas, eget porta turpis fringilla. Nam feugiat hendrerit quam sed tincidunt. Quisque posuere ex vitae ipsum elementum dapibus. Cras vehicula mauris ipsum, eget ultrices erat pellentesque eget. Fusce aliquam ante ex, et hendrerit sapien tincidunt eget. Quisque non eros id est semper placerat in et nibh. Suspendisse at laoreet neque. Phasellus ut massa pharetra, consectetur nibh ac, pellentesque lorem.

[pokken]

And here's a demo of how it ought to look using negative margins to remove the wasted space on the left side. I expect that would be inconsistent on different sized screens as well although I could use em maybe to counteract that?



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac nisl convallis lorem mollis consectetur in sed augue. Pellentesque aliquam, magna id euismod convallis, tellus lorem accumsan dolor, eget fringilla ex urna eget sem. Suspendisse malesuada nisl lorem, non vestibulum dolor lacinia a. Fusce volutpat euismod rhoncus. Maecenas sem diam, hendrerit varius turpis nec, fermentum vestibulum libero. In quis faucibus orci. Aliquam a purus at nisi molestie iaculis. Nulla et erat dolor. Fusce quis sagittis diam, non aliquam sapien. Quisque eget auctor libero. Sed rhoncus et urna non sagittis. Donec posuere nunc nec faucibus pretium. Donec risus eros, consectetur eget feugiat sit amet, scelerisque posuere est. Ut malesuada purus in massa aliquet, sed ultrices lorem commodo. Vivamus non laoreet lectus. Duis vel nibh ac ipsum aliquam commodo.

Ephara Creatures

Quisque condimentum fringilla nibh, eget porttitor lectus consectetur et. In neque ligula, ultricies et enim quis, auctor fringilla lacus. Sed rhoncus, nulla dictum placerat ornare, mauris metus ultricies nibh, nec condimentum tellus ligula vestibulum lacus. Vivamus odio leo, scelerisque sit amet tellus ac, iaculis dapibus justo. Quisque vitae ornare ipsum. Suspendisse pulvinar dictum leo eu imperdiet. Nulla dolor risus, lobortis eget faucibus in, dignissim ut quam. Duis lacus risus, dictum vitae ultricies eu, luctus eget sem. Donec gravida neque et felis blandit, quis condimentum dolor fermentum. Duis sagittis, tortor ut pharetra condimentum, tortor ligula varius lorem, ut dictum libero eros vitae nibh. Proin imperdiet leo et hendrerit commodo.

Vestibulum lacus tellus, ullamcorper in odio sed, semper tincidunt dui. Maecenas elit orci, imperdiet a tempor non, tempus quis nisl. Phasellus dictum quam lacus, et ultrices massa scelerisque at. Nam ut euismod dui, sed vulputate ipsum. Aenean laoreet id nisl nec laoreet. Vivamus mattis pharetra mi ut finibus. Donec convallis odio aliquet, mattis neque et, posuere ex. Fusce purus felis, vulputate ac velit non, congue suscipit lectus. Praesent ex mauris, dictum sed dolor vel, posuere feugiat erat.

Mauris maximus, massa euismod gravida malesuada, nibh urna efficitur ex, vestibulum viverra lacus enim a orci. Etiam iaculis eros sodales tellus convallis, vitae molestie nulla finibus. Fusce condimentum diam volutpat nisi egestas, sit amet vestibulum ipsum vehicula. Nulla tellus diam, fermentum eget sollicitudin quis, volutpat sed nibh. Pellentesque dictum justo et dolor egestas, eget porta turpis fringilla. Nam feugiat hendrerit quam sed tincidunt. Quisque posuere ex vitae ipsum elementum dapibus. Cras vehicula mauris ipsum, eget ultrices erat pellentesque eget. Fusce aliquam ante ex, et hendrerit sapien tincidunt eget. Quisque non eros id est semper placerat in et nibh. Suspendisse at laoreet neque. Phasellus ut massa pharetra, consectetur nibh ac, pellentesque lorem.

[Feyd_Ruin]

What I'd like is to be able to do is set the sizing of the float div so that it just fills say, 30% and has reasonable margins, then I set the box and image to 100% and they fill the float

Added.
Float will need the width (%, em, or px) that you want, while box will need a width=100% so it knows to always fill containing (floating) div.

Ephara Creatures

Quisque condimentum fringilla nibh, eget porttitor lectus consectetur et. In neque ligula, ultricies et enim quis, auctor fringilla lacus. Sed rhoncus, nulla dictum placerat ornare, mauris metus ultricies nibh, nec condimentum tellus ligula vestibulum lacus. Vivamus odio leo, scelerisque sit amet tellus ac, iaculis dapibus justo. Quisque vitae ornare ipsum. Suspendisse pulvinar dictum leo eu imperdiet. Nulla dolor risus, lobortis eget faucibus in, dignissim ut quam. Duis lacus risus, dictum vitae ultricies eu, luctus eget sem. Donec gravida neque et felis blandit, quis condimentum dolor fermentum. Duis sagittis, tortor ut pharetra condimentum, tortor ligula varius lorem, ut dictum libero eros vitae nibh. Proin imperdiet leo et hendrerit commodo.

Vestibulum lacus tellus, ullamcorper in odio sed, semper tincidunt dui. Maecenas elit orci, imperdiet a tempor non, tempus quis nisl. Phasellus dictum quam lacus, et ultrices massa scelerisque at. Nam ut euismod dui, sed vulputate ipsum. Aenean laoreet id nisl nec laoreet. Vivamus mattis pharetra mi ut finibus. Donec convallis odio aliquet, mattis neque et, posuere ex. Fusce purus felis, vulputate ac velit non, congue suscipit lectus. Praesent ex mauris, dictum sed dolor vel, posuere feugiat erat.

[Feyd_Ruin]

Note: Float stops floating and positions its contents as a [center] instead when the screen width is <850px (ie: mobile screens). Bear this in mind when floating.

A 300-400px float, for instance, will always look good. A 500px+ float, however, will be too screen-heavy at certain sizes, and less than 300px can seem skinny (depending on content) when it's floating as a [center] by itself on mobile. Shoot for as close to 400 as you can, and it'll look good no matter the browser's screen size.

[pokken]

I'm having great luck with 25% floats for the big screen, but they seem to look weird on smaller browsers, but overall very successful. It might be a good idea to make the % switch to 100 kinda like how bootstrap grids do when they have to spread out? (e.g. grid is 12 wide but on smaller screens it's 3-wide so a 3-width div will take up the full width).

Anyway I sincerely appreciate this as I'm a serious float user so any amount of improvement is super helpful. I really like the feel of text wrapping around little popout boxes kinda more magazine-like.

[Feyd_Ruin]

I'm having great luck with 25% floats for the big screen, but they seem to look weird on smaller browsers,

You'll always have this a bit when you use a %.
The post's content width will be between 1558px on large screens and 578px on small/mobile screens.
(1560 & 580, but with a pixel padding on both sides)

Which means a 25% will go from 390px to 145px.

If you went with a set size of 400px it'll take up right about 25% of the screen on a large screen, about 45% of the screen on the smallest size when it's still floating, but still fill 70% of the screen (15% padding on each side) when you're on mobile.