Quote:
Originally Posted by ElMiko
And yes, RbnJrg, that's exactly what I was looking for. I'm curious, though, how does the use of "inline-block" differ from float? That is, on the surface, they appear to be doing a visually indistiguishable thing here, but surely there's a subtle difference that I'm not catching. Is it the wrapping behavior of the two elements?
|
Read the following article:
https://www.digitalocean.com/communi...s-inline-block
Quote:
I see that they detatch in the Sigil Preview window if it's narrow enough (presumably would do so on, like, a phone screen too), whereas the float (and table) css did not.
Also, is it necessary to define the width for the col2 span? I've tried toggling it on and off, and it doesn't seem to affect the wrapping behavior one way or another...
|
That is because you disable the width of .col2. If you don't set a width, then it will be by default 100% and then you see the following output:
In order for the .col2 element (box) to be next to the .col1 element (box), you have to define a width for .col2 such that, when added to the width of .col1, it is less than 100%. As long as this is respected, unless the screen width is very narrow, .col1 will always have a width of 15% of the total width, while .col2 will have a width of 76%. However, if the user sets a large enough font size, the text in .col1 may overlap the text in .col2.
But as you appointed, if the screen width is very narrow, you can't avoid UNDER EPUB2, to get outputs like the following:
But set the width of .col2.