search

dvschultz / 99problems

99 Problems and e-reader rendering are all of them
60 stars 3 forks source link

ADE 2.0+ has some odd stacking behavior when multiple floats are used #32

Open makeBetterEBooks opened 10 years ago

makeBetterEBooks commented 10 years ago

When multiple images floated to the same side are placed in close proximity to each other, the "text wrap" goes wonky (got all technical there) and starts overlapping the images.

Can be fixed by placing another (non-floated) object between the offending images and using clear: both; on that. I usually wrap things in superfluous divs to achieve this.

float_bug

teytag commented 10 years ago

Hi, My solutions is below: screen shot 2014-07-10 at 2 23 38 pm screen shot 2014-07-10 at 2 23 46 pm screen shot 2014-07-10 at 2 18 19 pm screen shot 2014-07-10 at 2 15 44 pm

makeBetterEBooks commented 10 years ago

@teytag I'm not saying that solution wouldn't work, but the example you provide doesn't demonstrate the issue. The problem occurs when the images collide. What happens if the amount of text between the first and second image isn't enough to fill the vertical height of the first image?

teytag commented 10 years ago

Hi, My second solution is below:

screen shot 2014-07-10 at 5 32 20 pm screen shot 2014-07-10 at 5 32 44 pm screen shot 2014-07-10 at 5 36 18 pm screen shot 2014-07-10 at 5 36 23 pm screen shot 2014-07-10 at 5 34 57 pm