因此，我将网站转换为 HTML5，并丢失了标签……一切都很好，直到我开始使用我的侧边栏和内容区域。
例如，当 中的任何元素<section id="content">提供上边距（#first-article）时（或当<section id="content">提供填充时）， 的内容<nav id="sidebar">将位于与 #content 文本相同的 Y 坐标处。
请注意，我并没有说#sidebar 内容具有相同的样式。计算样式中没有padding-top、margin、postion: top:X或任何将这些元素定位在相同 Y 坐标上的东西。
在创建布局（和其他 HTML5 块元素）方面，我相当缺乏经验。所以对我来说，能走到这一步，真是太棒了，哈哈。然而，我在其他方面都非常精通css，这就是为什么这让我把头发拉出来......
我使用display: table-cell样式来定位#sidebar和#content。我确信这与它有关。不幸的是，这是我设法让代码做我想做的事情的唯一方法。
如果大家能在这里给我一些建议，我将不胜感激！与此同时，我将对此进行更多研究。提前谢谢大家:)
注意： 除了我的样式（如下）之外，我还使用了html5 样板文件“ normalize.css ”和“ main.css ”。他们似乎并没有为我的问题做出贡献......
示例-我的问题示例
这是HTML：
<div id="page">
<header id="head">
<img id="logo" src="/Images/head/logo-gloss-white.png">
<nav id="account">
<ul>
<li id="phone">Call (503) 256-5600</li>
<li>Logout</li>
<li>My Cart (3)</li>
</ul>
</nav>
</header>
<nav id="main">
Main Menu
</nav>
<nav id="search-bar">
Select Vehicle and Searchbox
</nav>
<nav id="crumbs">
Directory Tree
</nav>
<section id="content-wrap">
<nav id="sidebar">
<ul>
<li>
<span>Nav</span>
</li>
</ul>
</nav>
<section id="content">
<article id="first-article">
<p>Ecommerce Tracking - Before Google Analytics can report ecommerce activity for your website, you must enable ecommerce tracking on the profile settings page for your website. After that, you must implement the ga.js ecommerce tracking methods in your shopping cart pages or through your ecommerce software. The collection of ecommerce methods work together to send each user's transaction information to the Google Analytics database as it occurs. In this way, Analytics can link a specific referral source to a conversion or purchase. Most template-driven ecommerce engines can be modified to include this information hidden in the order confirmation page.</p>
<ul>
<li>General Process</li>
<li>Guidelines</li>
<li>Complete Example</li>
<li>General Process</li>
</ul>
<p>The basic process for tracking ecommerce using Google Analytics can best be described by summarizing the three methods required for tracking ecommerce transactions on your site. These methods are described in the order in which you should invoke them in your shopping cart or ecommerce software.</p>
<p>Create a transaction object. - Use the _addTrans() method to intialize a transaction object. The transaction object stores all the related information about a single transaction, such as the order ID, shipping charges, and billing address. The information in the transaction object is associated with its items by means of the order IDs for the transaction and all items, which should be the same ID.</p>
<p>Add items to the transaction. - The _addItem() method tracks information about each individual item in the user's shopping cart and associates the item with each transaction via the orderId field. This method tracks the details about a particular item, such as SKU, price, category, and quantity.</p>
<p>Submit the transaction to the Analytics servers. - The _trackTrans() method confirms that a purchase has occurred, and all data that has been built up in the transaction object is finalized as a transaction.</p>
<p>There are many ways that this information can be retrieved from the ecommerce engine. Some ecommerce engines write the purchase information to a hidden form that you can use, others keep the information in a database that you can retrieve, and others store the information in a cookie. Some of the more popular ecommerce engines that recognize Google Analytics provide their own modules to simplify order tracking for Analytics.</p>
</article>
</section>
</section>
</div>
<footer id="footer">
Footer
</footer>
这是CSS：
body {
background:#121212 url(/images/body/pageBg.jpg) repeat-x top;
font-size:12px;
clor:#333;
}
div#page {
width:1000px;
margin:0px auto;
position:relative;
border-radius:0px 0px 10px 10px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
}
header#head {
position:relative;
height:100px;
background:#121212 url(/images/head/headMetal.jpg) no-repeat right;
border-bottom:#000 1px solid;
}
nav#main {
height:44px;
background:#121212 url(/images/menu/navBarBg.jpg) repeat-x;
}
nav#search-bar {
height:50px;
background:#f70 url(/images/menu/orangeBarBg.jpg) repeat-x;
border-bottom:#F50 1px solid;
}
nav#crumbs {
color:#575647;
height:34px;
background:#fff;
border-bottom:#eee 1px solid;
}
section#content-wrap {
background:#e0e0e0;
border-radius:0px 0px 10px 10px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
}
#sidebar {
display:table-cell;
width:200px;
background:#fff;
border-right:#ccc 1px solid;
border-radius:0px 0px 0px 10px;
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-radius:0px 0px 0px 10px;
}
#content {
display:table-cell;
height:500px;
padding:15px;
}
footer#footer {
width:970px;
margin:0px auto;
color:#fff;
margin-top:15px;
height:180px;
padding:15px;
background:#1e1e1e url(/images/footer/footBg.jpg) repeat-x center;
border-radius:10px 10px 0px 0px;
-moz-border-radius:10px 10px 0px 0px;
-webkit-border-radius:10px 10px 0px 0px;
}
#page, #footer {
-moz-box-shadow: 0px 0px 20px #000; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #000; /* Safari, Chrome */
box-shadow: 0px 0px 20px #000; /* CSS3 */
}
/* Content */
/*----------------------- This is to demonstrate the issue at hand ------*/
#first-article {
margin-top:100px;
}
/* Head Area */
img#logo {
margin:10px 0px 0px 10px;
}
nav#account {
position:absolute;
top:0;
right:0;
}
nav#account {
margin:0;
}
nav#account li {
float:left;
margin-right:15px;
}