CODEWITHSUNDEEP
htmlcss
Manish Basdeo
Manish Basdeo

Reputation: 6269

Why does the clear not apply in this case?

Why the use of clear does not apply here when I am using margin top?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#t1{float:left;border:#000 thin groove;width:200px;}
#t3{float:left;border:#000 thin groove;width:200px;clear:both;margin-top:-40px;}
</style>
</head>

<body>
<p id="t1">This is child 1</p>
    <p id="t3">This is child 3</p>
</body>
</html>

Upvotes: 0

Views: 57

Answers (2)

jchavannes
jchavannes

Reputation: 2710

Seems to be working exactly how you would expect it to...

http://jsfiddle.net/2wuVx/

Perhaps you didn't mean to use a negative margin?

Upvotes: 1

Quentin
Quentin

Reputation: 943157

clear means "If a previous element is floating, do not bubble up beside it".

It does not mean "Always render this element below any previous elements".

Without clear, 3 would appear 40 pixels above the point to the right of 1. With clear, 3 appears 40 pixels above the point below 1.

Upvotes: 0

Related Questions