为什么我的left和right是从左到右排列的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{padding:0;margin:0;}
#wrap{margin:0 auto;width:900px;height:500px;background-color:red;position:relative;}
#left{width:200px;height:500px;background-color:green;position:absolute;top:0;left:0;}
#right{width:300px;height:500px;background-color:blue;position:absolute;top:0;right:0;}
#mid{height:500px;margin:0 300px 0 200px;background-color:yellow;}
</style>
</head>
<div id="wrap">
<div id="left">111fdsjkfhjkdhfjajfsafhjkashfjkahsfjkajfafhajfhjkahfjks11</div>
<div id="mid">打扫房间看哈房间卡卡卡视角复健科暗示及大连市辣椒水可是可是就撒娇的就几点开始机电设计是的暗示,faffffffffffffffffffffffffffffffffff.f</div>
<div id="right">222fd4f4fs4d5f4s64d2g42d4s564sgssgdgsdgsdgdgsgsdgsgsg22</div>
</div>
<body>
</body>
</html>