Clear problems

[heldenbrau]

I am always having problems with the clear property.  It seems simple to understand, but it never works as simply.  Here is the page I'm having a problem with

 

http://www.kangercourt.com/temp.php

 

Here is the

.one{
  border: solid 1px;
  padding:4px;
  height:auto;
  width:auto;
  float:left;
  text-align:left;
  vertical-align:middle;
  margin:2px;
  clear:both;

}

.two{
  border: solid 1px;
  padding:4px;
  height:auto;
  width:auto;
  float:left;
  text-align:left;
  vertical-align:middle;
  margin:2px;
  display:none;
  clear:both;

}

.three{
  border: solid 1px;
  padding:4px;
  height:auto;
  width:auto;
  float:left;
  text-align:left;
  vertical-align:middle;
  margin:2px;
  display:none;
  clear:both;

}

.level{
  border: solid 0px;
  height:30px;
  width:70px;
  float:left;
  text-align:right;
  padding-right:5px;
  vertical-align:bottom;
  clear:none;
}

.levelhid{
  border: solid 0px;
  height:30px;
  width:70px;
  float:left;
  text-align:right;
  padding-right:5px;
  vertical-align:bottom;
  display:none;
  clear:both;
}

.level2{
  margin-left: 50px;
  border: solid 0px;
  height:30px;
  width:150px;
  float:left;
  text-align:right;
  padding-right:5px;
  vertical-align:bottom;
  clear:none;
}

.level2hid{
  margin-left: 50px;
  border: solid 0px;
  height:30px;
  width:90px;
  float:left;
  text-align:right;
  padding-right:5px;
  vertical-align:bottom;
  display:none;
  clear:both;
}

.level3{
  margin-left: 100px;
  border: solid 0px;
  height:30px;
  width:150px;
  float:left;
  text-align:right;
  padding-right:5px;
  vertical-align:bottom;
  clear:both;
}

.level3hid{
  margin-left: 100px;
  border: solid 0px;
  height:30px;
  width:150px;
  float:left;
  text-align:right;
  padding-right:5px;
  vertical-align:bottom;
  display:none;
  clear:both;
}

.box{
  border: solid 1px;
  padding:4px;
  height:auto;
  width:auto;
  float:left;
  text-align:left;
  vertical-align:middle;
  margin:2px;
  clear:right;

}

.boxy{
  border: solid 1px;
  padding:4px;
  height:auto;
  width:auto;
  float:right;
  text-align:left;
  vertical-align:middle;
  margin:2px;
  clear:none;

}

.boxhid{
  border: solid 1px;
  padding:4px;
  height:auto;
  width:auto;
  float:left;
  text-align:left;
  vertical-align:middle;
  margin:2px;
  display:none;
  clear:right;

}

.box2{
  border: solid 1px;
  padding:4px;
  height:auto;
  width:auto;
  float:left;
  text-align:left;
  vertical-align:middle;
  margin:2px;
  clear:right;

}

.box2hid{
  border: solid 1px;
  padding:4px;
  height:auto;
  width:auto;
  float:left;
  text-align:left;
  vertical-align:middle;
  margin:2px;
  display:none;
  clear:right;

}



br{
  clear:both;
}

#expand2{
  border: solid 1px;
}

#expand3{
  border: solid 1px;
}

.plus{
  width:22px;
  height:20px;
  background: url('/images/plus.png');
}

.delbut{
  border-color:red;
}

.delform{
  float:left;
  clear:left;
  vertical-align:bottom;

}

css

 

I am viewing this in Firefox and here is what I need to understand:

 

1.  The property for the form delform which contains the del button at the top left says clear:left; I understand this to mean that no floating objects can appear on the left of it but it is ok for floating objects to appear on the right.  So why does the next object which is a div called 'level' which has a value of clear: 'none'; go to the next line?

 

2.  When I click the far right + sign to make the next level of cats appear, they use the same classes, but this time the del button doesn't clear objects to the right of it and the level div does, why is that?

 

3.  And in Internet explorer.  The first category, the del button is cleared to the right, but is ok in the next category, until you get to the last box div in that second cat div, it then fails to clear the the right, why?

 

There is something I'm really not getting about clearing.

 

 

[ShibSta]

1) Simple, because both forms are using the class delform which says to clear: left; float: left.

 

2) Related to #1, both forms are not using the delform class.

 

3) Which version of IE are we talking about?