mirror of
https://github.com/RGBCube/serenity
synced 2025-10-28 13:02:36 +00:00
af757a1659
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.
64 lines
2.3 KiB
HTML
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>
|