Html 并排放置div。。。我读过的书都没用

我读过其他关于堆栈溢出的文章，但到目前为止没有一篇有效。我遇到的问题是两个div不能并排坐着

我有一个主内容div和一个小appbar div，我正试图直接放在内容的右侧

我尝试的所有操作都导致appbar div位于我的页脚下，或者导致内容位于容器下

#appbar {
width:300px;
background-color:orange;
position:relative;
}

#content {
color:black;
width:500px;
}

footer {
height:10%;
opacity:0.8;
text-align:center;
}

---

尝试如下方式浮动元素：

#appbar{
float:right
}

#content {
float:left
}

#footer {
position:absolute;
clear:both;

---

Id将appbar和内容放在设置为800px宽度的容器/包装器div中。然后将内容和appbar浮动到左浮动：左；然后在页脚上使用clear:both。请记住，这些元素将并排放置，如果您希望它们之间有一点间距，请使用填充或边距。

使用显示：内联柔性

    #appbar {
width:300px;
background-color:orange;
position:relative;
display: inline-flex;
}

#content {
color:black;
width:500px;
display: inline-flex;
}

footer {
height:10%;
opacity:0.8;
text-align:center;
}

---

请分享你的HTML结构，或者更好的是，添加一个JSFIDLE。你试过float:left吗？？？？或者尝试替代这一做法，使页脚右侧的div几乎不存在。display:inline如果不想使用inline flex，也可以使用