programming-examples/css/Clear both.html
2019-11-15 12:59:38 +01:00

68 lines
2.0 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:subLang='en'>
<head>
<title>Clear Both</title>
<style type='text/css'>
body {
font: 18px arial;
}
div#container {
border: 1px solid rgb(144, 196, 120);
margin: 0 20px;
background: rgb(102, 240, 163);
padding: 4px;
}
a:hover {
background: pink;
color: red;
}
div#float {
text-align: center;
float: left;
width: 200px;
height: 200px;
border: 1px solid rgb(196, 153, 144);
background: rgb(202, 202, 196);
}
div.content {
background: blue;
border: 1px solid rgb(244, 244, 202);
}
div#clear {
border: 1px solid rgb(102, 65, 144);
background: green;
clear: both;
}
</style>
</head>
<body>
<div id='container'>
<div id='float'>
Float text. <a href='http://csharp.happycodings.com'>csharp</a>.
</div>
Content text. <a href='http://cplusplus.happycodings.com'>cplusplus</a>.
<div class='content'>
Content text. <a href='http://happycodings.com'>visualbasic</a>.
</div>
Content text. <a href='http://android.happycodings.com'>android</a>.
<div class='content'>
Content text. <a href='http://php.happycodings.com'>php</a>.
</div>
Content text. <a href='http://javascript.happycodings.com'>javascript</a>.
<div class='content'>
Content text. <a href='http://python.happycodings.com'>python</a>.
</div>
Content text. <a href='http://asp.happycodings.com'>asp</a>.
<div id='clear'>
Clear text. <a href='http://happycodings.com'>happycodings</a>.
</div>
<div>
Code Examples
</div>
</div>
</body>
</html>