programming-examples/css/Clearing floated content.html

50 lines
1.5 KiB
HTML
Raw Permalink Normal View History

2019-11-15 12:59:38 +01:00
<!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" subLang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Clearing floated content</title>
<style type="text/css" media="screen">
#wrapper {
width: 800px;
margin: 0 auto;
background: pink;
}
#divOne, #divTwo {
float: left;
width: 400px;
}
#divOne {
margin-right: 24px;
}
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div id="wrapper" class="clearFix">
<h1>Love Sayings</h1>
<div id="divOne">
<h2>Div one</h2>
<p>How we treasure (and admire) the people who acknowledge us! Julie Morgenstern</p>
<p>Love means not ever having to say you're sorry. Erich Segal</p>
<p>Whatever our souls are made of, his and mine are the same. Emily Bronte</p>
</div>
<div id="divTwo">
<h2>Div two</h2>
<p>Love reminds you that nothing else matters. Amy Bushell</p>
<p>The important thing was to love rather than to be loved. W. Somerset Maugham, 'Of Human Bondage'</p>
<p>Love is smiling on the inside and out. Jennifer Williams</p>
</div>
</div>
<p>Love is life. And if you miss love, you miss life. Leo Buscaglia</p>
</body>
</html>