HTML5块定位

我是HTML5新手，所以我的代码可能会很混乱，我正试图按上图所示布局块元素，但因为我选择了主体向左浮动，所以它会在幻灯片下方结束。我是这样编码的：

#container {
    height: 800px;
    width: 985px;
    position:relative;
}


    <article> 
    <span class="titlespacer">title text here</span></p>

  <ul>
    <li class="bodyspacer">Bullet</li>
    <span class="bodyspacer"><br>
      </span>
    <li class="bodyspacer">Bullet</li>
    <span class="bodyspacer"><br>
      </span>
    <li class="bodyspacer">Bullet</li>
    <span class="bodyspacer"><br>
      </span>
    <li class="bodyspacer">Bullet</li>
    <span class="bodyspacer"><br>
      </span>
    <li class="bodyspacer">Bullet</li>
</ul>
<aside>
    <div id="slideshow">
    <img src="images/polaroid1.jpg" width="320" height="332" class="polaroid">
    <img src="images/polaroid2.jpg" width="320" height="332" class="polaroid">
    <img src="images/polaroid3.jpg" width="320" height="332" class="polaroid">
  </div>
    </aside>
</article>

---

您将需要以下内容：

你的css

#container {
width:960px;
position:relative;
}
header{
float:left;
}
article{
width:600px;
float:left;
}
aside{
width:360px;
float:left;
}
.clear{
clear:both;
}

你的html5

<div id="container">
<header>your header</header>
<article>
    <section>your content</section>
</article>
<aside>
    <div id="slideshow">
        <ul>
        <li><img src="..."></li>
        <li><img src="..."></li>
        </ul>
    </div>
</aside>
<div class="clear"></div>
<footer>your footer</footer>
</div>

你的头球
你的内容




你的页脚

---

我希望这对你有帮助

尝试将

overflow:hidden

应用于

body

的父容器。为什么有这么多相同ID的图像？这可能会弄乱JavaScript代码。将ID更改为类，谢谢。这原本是一张图片，但当我添加更多图片时，我一定是在没有注意到的情况下复制了ID。幻灯片仍显示在正文下方，我将用更新的代码修改我的原始帖子。我已经更新了我的代码-我意识到这很混乱，但我感谢你的帮助！

<div id="container">
<header>your header</header>
<article>
    <section>your content</section>
</article>
<aside>
    <div id="slideshow">
        <ul>
        <li><img src="..."></li>
        <li><img src="..."></li>
        </ul>
    </div>
</aside>
<div class="clear"></div>
<footer>your footer</footer>
</div>