Question

<div id="container">
  <div id="top"></div>
  <div id="left"></div>
  <div id="right"></div>
  <div id="clear"></div>
</div>

#container{
  width:200px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;   
}

#top{
  width:200px;
  height:20px;
  border:medium ridge #FFF;
}
#left{
  float:left;
  width:50px;
  height:20px;
  border:medium ridge #FFF;
}
#right{
  float:right;
  width:40px;
  height:20px;
  border:medium ridge #FFF;
}
#clear{
  clear:both;  
}

Why the #right and #top are not right aligned?

Answer 1

Its because the top element is actually overflowing the bounds of the container, while the floated element right is being restricted to it. The top element is overflowing the container because the border is not included in the width. So top is actually occupying 204px.

Problem Illustrated via Example: http://jsfiddle.net/KhJ6e/2/

To fix, adjust top to account for the 2px border on each side. (subtract 4 from width of container) or specify width as auto depending on your intentions.

#top{
    width:196px;
    height:20px;
    border:medium ridge #FFF;
}

Example: http://jsfiddle.net/KhJ6e/1/