为何设置了margin-left后，right标签不见了？

/*container是一个主容器*/
#container{
    margin: 0px auto 0px 0px;
    width: 700px;
    height: 100%;
    background-image: url(img/container-bg.gif);
    background-repeat: repeat-y;
    padding-left: 50px;/*设置了背景色竖条，为了把内容往右偏*/
}
 #right{
    float: left;
    background-image: url(img/righ-bg1.gif);
    background-repeat: repeat-y;
    height: 100%;
    width: 190px;
    margin-left: 15px;
    background-color: darkblue;
}

body部分

 <body>
        <div id="container">
            <div id="mid">
                <div id="logo">
                    <img  id="logo-img" src="img/logo.gif" />
                </div>
                <div id="word"><!--页面内容有字体时，尽量用一个div把p元素包裹起来-->
                <p>2016年，一群年轻人聚到了一起</p>
                <p>创立了放飞思维创业设计，一个有着独特构思和非凡创意公司。</p>
                <p>他们致力于设计出色的作品，在不断创新的过程中找到自己发展的方向    </p>
                <p>并朝着那个方向继续前进</p>
                </div>
                <div id="footer">
                    <p class="gray">2016 &copy; 放飞思维创意设计公司</p>
                    <p>
                        <a href="#">HOME</a>|
                        <a href="#">HOME</a>|
                        <a href="#">HOME</a>|
                        <a href="#">HOME</a>|
                        <a href="#">HOME</a>|
                        <a href="#">HOME</a>|
                        <a href="#">HOME</a>
                    </p>
                    <p>Design:<a href="#">Marsie</a></p>
                </div>
            </div>
            <div id="right">right</div>
        </div>

    </body>

图片说明

用chrome调试一下，不断将margin挑小看right会不会出现，如果出现就是marginleft太大了，（前端小白发言，表示都是这么做的）

不是很明白你的意思，我这边打开是这个样子图片说明

你看一下你的mid设置的width是多大，要控制mid的width小于445px