除了和文章重叠 header

Question

我正在为 HTML5 中的 Old Treasures Furniture and Imports 重新制作一个网站。

我对 aside 和 article 标签的定位有疑问。他们似乎非常喜欢 header 以至于他们在他之上。我试过把这两个（aside和article）的位置设置为relative、absolute、fixed。正如我阅读的另一个线程中有人建议的那样，我已经尝试了 overflow: hidden;。 None 已正确定位它们，因为它们应该出现：

__________________________
|Header                  |
|------------------------|
|aside|article           |
|     |                  |
|_____|__________________|
|footer                  |
|------------------------|

只有页脚在正确的位置。

我的index.php:

<!DOCTYPE html>
<html>
<head>
<!-- Imports page's CSS style -->
<link href="01d7r345ur3557y13.css" rel="stylesheet" type="text/css" />
<!-- Sets Page FavIcon -->
<link rel="shortcut icon" href="http://i.imgur.com/V6a6eGp.png" />
<title>Old Treasures Furniture and Imports</title>
</head>

<body>
<!-- Page Header/Banner Begin -->
<header alt="Old Treasures Furniture and Imports" />
<!-- Page Header/Banner End -->

<!-- Navigation Buttons Begin (Home, Products, Services, Contact) -->
<aside>
    <?php
        include("aside.php");
    ?>
</aside>
<!-- Navigation Buttons End -->

<!-- Content of Page Begin -->
<article>
    <img class="wagon" src="http://i.imgur.com/1hg8f8H.jpg" />
    <p>Welcome to Old Treasures Furniture and Imports, <br />We are a company dedicated to the manufacture and marketing of solid wood products.<br />Our services are oriented to decorators, builders, architects and clients like you.</p>
</article>
<!-- Content of Page End -->

<!-- Footer of Page Begin (Copyright, "Inline"-Share) -->
<footer>
    <?php
        include("footer.php");
    ?>
</footer>
<!-- Footer of Page End -->
</body>
</html>

还有我的01d7r345ur3557y13.css:

（我省略了其余的CSS，我怀疑它们对此有影响。）

body {
margin: 0;
padding: 0;
background: url("http://i.imgur.com/kRh8uzK.png?1") fixed;
}
header {
width: 65%;
height: 250px;
background-image: url("http://i.imgur.com/jxzkFhn.jpg");
background-size: 100% 100%;
margin: 20px auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
article {
border: 1px #fff solid;
overflow: hidden;
}
footer {
background: url("http://i.imgur.com/x1WvVZp.png");
text-align: center;
color: #FFF;
}
footer p {
font-size: 10px;
}
header, footer, aside, article {
display: block;
}

/*Page Navigation*/
aside {
float: left;
width: 120px;
margin: 0;
}
aside li {
display: block;
}
aside ul {
margin: 0;
padding: 0;
}
.home {
background: url("http://i.imgur.com/ma42CHH.png");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
webkit-transition: background .25s ease-in-out;
width: 119px;
height: 31px;
}
.home:hover {
background: url("http://i.imgur.com/iKLHtvh.png")
}
.products {
background: url("http://i.imgur.com/sqBqNwp.png");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
webkit-transition: background .25s ease-in-out;
width: 119px;
height: 31px;
}
.products:hover {
background: url("http://i.imgur.com/hRGXnqt.png?1");
}
.services {
background: url("");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
webkit-transition: background .25s ease-in-out;
width: 119px;
height: 31px;
}
.services:hover {
background: url("");
}
.contact {
background: url("http://i.imgur.com/etMulj7.png");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
webkit-transition: background .25s ease-in-out;
width: 119px;
height: 31px;
}
.contact:hover {
background: url("http://i.imgur.com/v4ZA6LH.png");
}

截至目前，我仍在尝试其他方法来解决此问题。非常感谢！

这是当前网站以及元素的定位方式。 http://www.oldtreasuresfurniture.com/

这就是我目前得到的：

Answer 1

1) 我在这里看到的一个问题是，您使用了 header 标签作为自闭标签。

2) 确保已清除必要位置的浮动，例如- http://www.w3schools.com/cssref/pr_class_clear.asp

3) 如果您分享您遇到问题的页面的 URL，调试会更有帮助。

除了和文章重叠 header

Aside and Article overlapping the header

html

css

php

positioning