Div卡错位

Question

这是我的Portfolio我正在研究

第一次进入网站时，黄色的Wakey卡位于侧边栏下方（它应位于侧边栏的右侧。

刷新网站后，它会进入正确的位置 可能导致这种情况的原因是什么？

这是卡所在的内容div的css

     #content
{
    width:70%;
    position: absolute;
    display: inline-block;

}

这是侧边栏

#sidebar
{
    background-color:#4b4b4b;
    margin:0px;
    margin-left:5%;
    width:400px;
    height:1000px;
    -moz-box-shadow: 0px 0px 25px #000000;
    -webkit-box-shadow: 0px 0px 25px #000000;
    box-shadow: 0px 0px 25px #000000;
    display: inline-block;
}

你可以从网站上看到html，所以我不会发布它以保持简短

在IE上它正常显示，它在chrome上给我这个问题

更新： 我现在已经将＃content-wrapper显示更改为display:inline;，但它没有帮助

Answer 1

为什么不漂浮你的侧边栏？并让#content在普通文档流中定位...你可能也想为#content设置宽度..

#sidebar
{
  background-color:#4b4b4b;
  margin:0px;
  margin-left:5%;
  width:400px;
  height:1000px;
  -moz-box-shadow: 0px 0px 25px #000000;
  -webkit-box-shadow: 0px 0px 25px #000000;
  box-shadow: 0px 0px 25px #000000;
  float: left;

}

#content
{
 float: left;
}