Css 布局帮助

我正在尝试为一个网络建立一个个人资料页面…类似于Facebook的个人资料页面。我需要标签的背景在左边的个人资料照片下面…所以当用户更新他们的状态时，它会在照片下面垂直增长…看看Facebook个人资料页面。我试着用position:absolute将状态放在顶部的“topStatus”；顶部：-51px；在左边的“profile_leftside”一栏中，它可以工作，但当更多的应用程序添加到左边时，它会显示在底部边框之后。不会保留在“pageContent”中

基本上这是我的布局

<div id="pageContent">

<div id="topStatus">
<div id="innerStatus">
*STATUS AND TABS HERE // EXPANDS VERTICALLY WHEN STATUS IS UPDATED*
</div>
</div>

<div id="profileContent">

<div id="profile_leftside">
*LEFT SIDE APPS*
</div>

<div id="profile_rightside">
*TAB CONTENT*
</div>

</div>

</div>

只是尝试在左上角获得“profile_leftside”，而不破坏底部的内容。也许有更好的方法来说明这一点

---

谢谢

我一直发现CSS框架非常有用。它们中的许多已经被一次又一次地验证过了，这让你在不得不担心特定CSS布局问题的基础上又上了一层楼

我已经在很多方面使用了Blueprint CSS，但也听说了960网格系统的优点

蓝图CSS：http://www.blueprintcss.org/
960网格系统：http://960.gs/

问候，

---

Chris

在JSFIDDLE.NET中添加任何CSS问题都比较容易，这样其他人就可以直接查看问题了。我为您添加了它，并提出了一个我认为您正在寻找的解决方案：

---

顶部的栏现在随着左侧的应用展开。我必须重新组织div的位置，并将“overflow:auto”添加到顶部状态栏，以允许其扩展，因为应用程序栏是一个浮动。

您希望左侧的配置文件与跨越容器的顶部状态栏重叠，还是希望它保持在状态栏下方？@snkmchnb-是的，我希望左侧的配置文件与顶部的状态栏重叠顶级状态区。我将其定位为绝对51px，因为它将其固定到位。我试过在左边使用一个负边距，但当状态更新时它会移动，只想状态区域垂直扩展..就像Facebook一样。也许我应该换个说法，这似乎是最合乎逻辑的方式。@Chrisc-谢谢你的提示！我将阅读一些蓝图，但我只想找到一个快速解决方案。：）当然，如果不使用框架，至少要使用某种css重置（）

#pageContent {
  width: 799px;
  min-height:600px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  float:left;
  border-left:1px solid #b3b3b3;
  border-right:1px solid #b3b3b3;
  border-bottom:1px solid #b3b3b3;
}
#topStatus {
  background: #f7f7f7;
  border-bottom:1px solid #DDDDDD;
  width: 100%;
}
#innerStatus {
  padding: 10px 10px 0px 225px;
   }
#profileContent {
  padding: 8px 0px 8px 10px;
}
#profile_leftside {
  float: left;
  width: 200px;
  position: absolute;
  top: 51px;
}
#profile_rightside {
  float: right;
  width: 580px;
}