today i was solving a very serious issue in my web project. offcourse as title suggests it was related to User Interface. i was trying to find out this issue since yesterday. all my development knowledge failed to understand the problem. everything was working fine till yesterday in firefox 2.x and IE 6 and we all were ready to deploy the build. one of my colleagues just checked the website in IE 7 and firefox 3 and told me that website is appearing totally wrong in both the browsers. but it used to happens some times. so debugging such an issue is always very difficult which actually occurs rarely. actually IE7 and firefox 3 were displaying my website tabbed menu bar to the right side of the browser causing unecessary scroll and wrong layout. so i figured out the issue was actually with css inside the header of  my application. 

i fixed that undesired floating issue with the help of "clear" property.  i just used clear:both to enforce all the browsers not to let anything float on eaither side. so here is the detail about this magical property.

Definition
Image and text elements that appear in another element are called floating elements.
The clear property sets the sides of an element where other floating elements are not allowed.

Inherited: No

--------------------------------------------------------------------------------
JavaScript Syntax
CSS properties can also be dynamically changed with a JavaScript.
Scripting Syntax: object.style.clear="left"
--------------------------------------------------------------------------------

Example
h2
{
clear: right
}
address
{
clear: both
}

Possible Values
left - No floating elements allowed on the left side
right - No floating elements allowed on the right side
both - No floating elements allowed on either the left or the right side
none - Default. Allows floating elements on both sides