Jump to content

Clear: Help


mx482
 Share

Recommended Posts

I'm a little confused about this...The definition says that right: no floating elements allowed on the right sideleft: no floating elements allowed on the left sideboth: no floating elements allowed on either the left or the right side.If you paste this code into your page and run, it will display three boxes. All the boxes will be adjacent on the same line (all floated left) even though the middle box has the instruction to not allow any floating elements on the right side.It must be my interpretation because you can experiment with putting clear: both in the middle box as well and it also doesn't display what I would expect.Please set me straight. Thanks.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><style type="text/css">div.one { border:1px solid #ff9900; width:120px; float:left;}div.two { border:1px solid #cccccc; width:120px; float: left; clear: right;}div.three { border:1px solid #cccccc; width:120px; float: left;}</style></head><body><div class="one"></div><div class="two"></div><div class="three"></div></body></html>

Link to comment
Share on other sites

The clear property defines how an element will be positioned with respect to the element that comes before it, not the element that comes after. So putting clear:right in the middle box does nothing, because there is no previous element floating to its right. Putting clear:both in the middle box causes the middle box to begin on a new line; it is clearing the box that would have been to its left.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...