mirror of
https://github.com/fergalmoran/ladybird.git
synced 2026-01-03 23:25:20 +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.
65 lines
2.3 KiB
HTML
65 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>
|