css debugging, cross-browser compatibility

There are two <div></div> tags. When it is browsed using Firefox, the effect is desirable. There is a gap between .steven and .john. However when it is browsed using IE, the effect is undesirable; .Steven and .john are connected together(There is no gap). How to solve this problem?

.steven{
     position: relative;
     width: 620px;
     left: 55px;
  开发者_Python百科   float: left;

     }

    .john {
     position: relative;
     width: 270px;
     right: 35px;
     float: right;


    }

Have you used a Reset CSS?

Different browsers have different defaults for display on different elements.