如何修复浏览器调整大小时移动的Html div

嗨，我是css新手，我在编码方面遇到了一个问题，我的html页面中有4个div，我将它们排列为标题左侧的两个div和右侧的两个div。我的问题是，当我重新调整浏览器窗口的大小时，标题右侧的div向下移动。我如何解决这个问题，以及如何将div与标题等距排列

这是我的网站的图片

请在这里找到我的html和css jsfiddle.net/hmz7g

请帮我解决他的问题

---

谢谢你的帮助

在一个div中包装多个div将解决此问题

例如

我给每个盒子涂上了不同的颜色，并按照您在上面描述的方式对它们进行了定位。您可以使用我的示例重新调整它们的大小/颜色，以便更好地了解它们

我希望这有帮助

    <div id="wrapper">

   <div id="box1" class="left">
   </div>

   <div id="box2" class="left">
   </div>


   <div id="box3" class="right">
   </div>

   <div id="box4" class="right">
   </div>

    #wrapper{

width:900px;
height:auto;
position:relative;

}

.left{

float:left;

}

.right{

float:right;

}

#box1{
    height:50px;
    width:50px;
    position relative;
    background-color:#0F0;
}

#box2{
    height:50px;
    width:50px;
    position relative;
    background-color:#00F;
}

#box3{
    height:50px;
    width:50px;
    position relative;
    background-color:#C30;
}

#box4{
    height:50px;
    width:50px;
    position relative;
    background-color:#90F;
}