1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-10-28 13:02:36 +00:00
serenity/Base/res/html/misc/clear-1.html
Andreas Kling af757a1659 LibWeb: Naively implement the CSS clear property
This is definitely not fully-featured, but basically we now handle
the clear property by forcing the cleared box below the bottom-most
floated box on the relevant side.
2020-12-06 01:45:51 +01:00

64 lines
2.3 KiB
HTML

<style>
#lefty {
float: left;
background: red;
width: 100px;
height: 100px;
}
#righty {
float: right;
background: green;
width: 50px;
height: 50px;
}
#lefty2 {
float: left;
background: orange;
width: 80px;
height: 80px;
}
#righty2 {
float: right;
background: magenta;
width: 30px;
height: 30px;
}
#lefty3 {
float: left;
background: cyan;
width: 40px;
height: 40px;
}
#righty3 {
float: right;
background: silver;
width: 20px;
height: 20px;
}
#clearo {
clear: left;
}
</style>
</style>
<body>
<div>
<div id=lefty>L</div>
<div id=righty>R</div>
</div>
<div>
<div id=lefty2>L2</div>
<div id=righty2>R2</div>
</div>
<div>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<div id=clearo></div>
<div>
<div id=lefty3>L3</div>
<div id=righty3>R3</div>
</div>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</body>