mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
389f47f6fe
We have to check that there's enough space at both the top and bottom of the float's margin box, otherwise we risk overlapping existing content.
43 lines
812 B
HTML
43 lines
812 B
HTML
<!DOCTYPE html>
|
|
<html class="js" lang="en-US">
|
|
<head>
|
|
<style>
|
|
* {
|
|
border: 0px solid black !important;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
}
|
|
|
|
#page {
|
|
background: cyan;
|
|
padding-left: 50px;
|
|
padding-top: 50px;
|
|
}
|
|
|
|
#content_box {
|
|
float: left;
|
|
background: lime;
|
|
width: 400px;
|
|
height: 150px;
|
|
}
|
|
|
|
.first {
|
|
background: pink;
|
|
|
|
width: 300px;
|
|
height: 100px;
|
|
float: left;
|
|
}
|
|
|
|
.second {
|
|
background: orange;
|
|
|
|
width: 200px;
|
|
height: 50px;
|
|
float: left;
|
|
}
|
|
</style>
|
|
</head><body><div id="page"><div id="content_box"><article class="first">first</article><article class="second">second</article> </div></div></body></html>
|