CSS上下对齐

试图通过相对/绝对定位和浮动来实现这一点

                 Col1                         Col2
------------------------------------------------------------
-  H1 Content aligned to top          - Some Content       -
-                                     -                    -
-                                     -                    -
-                                     -                    -
-                                     -                    -
-                                     -                    -
-                                     -                    -
- Some other content aligned to bot   -                    -
------------------------------------------------------------

Col2驱动Col1的高度

当我在col1中的项目上使用绝对位置时，我要么没有得到col1中的高度，要么col2最终与col1重叠

有什么帮助吗

---

谢谢

我的最佳解决方案是使用固定高度的容器：

<div id="news">
  <div class="news-panel" id="left-news">
    <h2>Side Header</h2>
  </div>
  <div id="footer-news">
    <h2>Side Footer</h2>
  </div>
  <div class="news-panel" id="right-news">
    Main Content
  </div>
</div>

div#news { margin: 0px auto; position: relative; width: 895px; height: 208px; border: 1px solid gray; }
div#news div.news-panel { position: absolute; top: 0; }
div#news div#footer-news { position: absolute; bottom: 0; }
div#news div#left-news { left: 0; margin-right: 60px; width: 390px; border: 1px solid red; }
div#news div#right-news { width: 437px; right: 0px; }

侧割台
侧脚
主要内容
div#news{边距：0px自动；位置：相对；宽度：895px；高度：208px；边框：1px实心灰色；}
div#news div.news-panel{位置：绝对；顶部：0；}
div#news div#footer news{位置：绝对；底部：0；}
div#news div#left news{左：0；右边距：60px；宽度：390px；边框：1px实心红色；}
div#news div#right news{宽度：437px；右侧：0px；}

---

虽然我不希望指定一个高度，但这是可行的（请参阅“发生了什么”部分）：

你能将css粘贴到问题的主体中吗？