68 lines
2.0 KiB
HTML
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>
|
||
|
|
|