css - div を正しく配置できない

Question

正直なところ、CSS と Div は私が最もよく知っているものではありません。しかし、その後のデザインのテンプレートをなんとか作成できたと思っていましたが、すべてが少し動きがちであることがわかりました..

Chrome では、最初は動作しているように見えますが、数回更新すると、「ページ上の位置」というテキストが次の行にジャンプします。Firefox では、物事はそもそも間違った場所にあります。

可能であれば、位置テキストと各行の間にパディング/マージンを取得する方法についても、うなずきたいと思います。今追加すると、すべてが完全に間違った場所に移動します。

デモ: http://cityroast.dk

CSS:

section {
    width: 100%;
    height: 100%;
    background: #e8ebef;
    padding: 5px;
}
div#catcontainer {
    width: 10%;
    height: 100%;
    float: left;
}
div#categories {
    width: 100%;
    height: 100%;
    float: left;
}
div#ads {
    width: 100%;
    height: 100%
    float: left;
    display: box;
}
div#ads span {
    font-family: Verdana;
    font-size: 12;
    text-align: left;
}
div#one {
    width: 10%;
    height: 80px;
    float: left;
}
div#two {
    width: 70%;
    height: 80px;
    background: aqua;
    float: left;
    text-align: center;
}
div#three {
    width: 10%;
    height: 80px;
    background: red;
    float: left;
    text-align: right;
    line-height: 80px;
}
div a {
    text-decoration: none;
    color: #000000;
    font-family: Verdana;
    font-size: 12px;
}

HTML:

<section>
    <div id="catcontainer">
        <div id="categories">
            <ul>
                <b>A menu</b>
                <li><a href="">Something</a></li>
                <li><a href="">Something2</a></li>
                <li><a href="">Something3</a></li>
            </ul>
        </div>
    </div>
    <div id="ads">
        <span>Your position on page</span>
        <div id="one">A picture</div>
        <div id="two"><b>Title</b></div>
        <div id="three"><b>Details</b></div>
    </div>
</section>

明らかに、コードの後半部分は現時点で 5 回エコーされ、5 行が取得されます。

もうありがとう！