CSS Bugs Errors during layout

1. Doubling of fields in float blocks in IE 5-6

Problem: we very often use margins and at least apply them to blocks with the float property, waiting for the desired result, we can be very surprised when IE suddenly moves our block to a greater distance than expected. Specifically: a left margin error (margin-left) - with the float property with the left parameter, a right margin error (margin-left) - with the float property with the right parameter. Expected result (correct): What result do we see in IE (incorrect): Solution: everything is simple, you need to add the line display: inline, i.e. declare a block as lowercase.

#FloatBlock
{
background-color:#ccc;
width:200px;
height:100px;
float:left;
margin-left:50px;
}









#FloatBlock
{
background-color:#ccc;
width:200px;
height:100px;
float:left;
margin-left:50px;
display:inline;
}


2. The problem with float blocks.

Problem: A block containing a floating block does not accept the required height, in order to accommodate it, the height remains as if there is no floating block. And this is not a mistake at all, because when applying the float property, the block is removed from the normal stream. Expected result: As a result: Solution: 1. Using an additional block with the clear property 2. Using overflow: hidden 3. Using float: left Immediately do not recall all the glitches. I propose to continue this list ...

FLOAT

Контейнер содержащий блок, к которому применено свойство float

#Container
{
border:red solid 1px;
}
#FloatBlock
{
width:100px;
height:100px;
border:#000 solid 1px;
float:right;
}


FLOAT

Контейнер содержащий блок, к которому применено свойство float

#Container
{
border:red solid 1px;
}
#FloatBlock
{
width:100px;
height:100px;
border:#000 solid 1px;
float:right;
}
.clear
{
clear:both;
}



#Container
{
border:red solid 1px;
width:100%;
overflow:hidden;
}


#Container
{
border:red solid 1px;
float:left;
}