Javascript 布局、顶栏和侧栏位置

我需要将顶部的栏放在它所在的位置，将侧栏放在右边，然后将块填充到侧栏的左侧，当侧栏不再存在时，它可以继续放在右侧（因此块）

所需外观：

CSS:

HTML:

dsf

CSS

小提琴：

---

干杯

有没有一个选项可以把你的内容分成几部分

你可以漂浮：就在广告上。但是如果你把事情分开，你会有更多的自由。它看起来也会整洁得多

这里有一个例子：

<div id="container">

<div id="top"></div>

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

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

<div id="bottom">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

</div>

#container {width: 510px;}
#container div {float: left; display: block;}
#top {width: 510px; height: 70px; background: red;}

#left {width: 306px; height: 150px;}
.box {width: 100px; height: 70px; margin: 2px 2px 0 0; background: green; }

#right {width: 204px; height: 214px; margin-top: 2px; background: black;}

#bottom {width: 510px;}

#容器{宽度：510px；}
#容器div{float:left；display:block；}
#顶部{宽度：510px；高度：70px；背景：红色；}
#左{宽度：306px；高度：150px；}
.box{宽度：100px；高度：70px；边距：2px2px0；背景：绿色；}
#右{宽度：204px；高度：214px；页边顶部：2px；背景：黑色；}
#底部{宽度：510px；}

您是否尝试设置，

浮动：正确.adverside

上的code>？似乎有效：没办法这么简单：P将其作为答案发布，我将接受：）

<div id="contents-h">
    <div class="advertstop">dsf</div>
    <div class="advertside"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
<div class="archiveentry"></div>

.advertside{ float:right; }

<div id="container">

<div id="top"></div>

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

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

<div id="bottom">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

</div>

#container {width: 510px;}
#container div {float: left; display: block;}
#top {width: 510px; height: 70px; background: red;}

#left {width: 306px; height: 150px;}
.box {width: 100px; height: 70px; margin: 2px 2px 0 0; background: green; }

#right {width: 204px; height: 214px; margin-top: 2px; background: black;}

#bottom {width: 510px;}