mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
514fa83708
- Use the border box of the floated element when testing if something needs to flow around it. - Take the floated element's containing block size into account (instead of the BFC root) when calculating available space on a line where a right-side float intrudes.
30 lines
2.3 KiB
HTML
30 lines
2.3 KiB
HTML
<style>
|
|
html {
|
|
background: white;
|
|
}
|
|
body {
|
|
margin-left: 200px;
|
|
margin-right: 200px;
|
|
background: wheat;
|
|
}
|
|
#lefty {
|
|
float: left;
|
|
background: green;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
#righty {
|
|
float: right;
|
|
background: red;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
</style>
|
|
<div id=lefty></div>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis sagittis velit ut suscipit. Maecenas sit amet maximus nunc. Integer a sem odio. Nunc cursus sollicitudin mauris, sed malesuada ipsum. Nulla ac euismod libero, ac gravida arcu. Phasellus convallis ornare metus, a vulputate dui rhoncus in. Cras mattis arcu vel nibh ultrices suscipit lobortis id libero.
|
|
|
|
<div id=righty></div>
|
|
Integer in rhoncus sem, sit amet pellentesque sapien. Donec eu velit aliquam, pharetra dui ut, tempor ante. Duis vitae metus ac mauris porta aliquam. Vestibulum vestibulum dignissim ligula ac varius. Fusce condimentum pellentesque neque, at finibus neque suscipit non. Suspendisse arcu urna, condimentum eget massa et, ornare convallis metus. Nunc malesuada fermentum diam. Ut rutrum dignissim eros, quis sollicitudin elit interdum vel. Vivamus tortor diam, tristique vitae mauris vitae, mollis pellentesque sapien. Cras pellentesque finibus lacinia. Aliquam at leo dapibus, consectetur leo id, ultrices augue. Praesent vitae magna metus. Aliquam condimentum urna eu rhoncus efficitur. Fusce elementum diam eget tincidunt bibendum.
|
|
|
|
Donec vel tellus eu mi hendrerit sagittis ac interdum purus. Etiam a sodales lacus. Maecenas vehicula diam vitae elit convallis, quis sagittis metus accumsan. Mauris lacus risus, dictum vitae fermentum sit amet, finibus nec tellus. Nunc eros tortor, rhoncus et eros eget, finibus aliquet dui. Sed venenatis, sem quis mollis pharetra, elit ipsum dignissim felis, id feugiat arcu metus vitae eros. Curabitur ac porta odio. Vivamus placerat sodales maximus. Praesent tincidunt, urna sit amet dignissim luctus, erat erat ultricies quam, a maximus massa metus vehicula diam. Aenean pharetra augue massa, in luctus neque interdum quis. Sed mattis magna egestas semper elementum. Morbi vitae velit eu nunc fringilla aliquam sed at diam. Cras vulputate vel magna id scelerisque. Praesent condimentum vehicula ipsum, sit amet consectetur tortor volutpat at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
|