Help with Layout

Question

Hi there,

I'm trying to build a profile page for a network...similar to Facebook profile page. I need the background the tabs are on to go under the profile photo on the left...so when the user updates their status it grows vertically underneath the photo..take a look at Facebook profile page. I've tried placing the status at the top "topStatus" with position: absolute; top: -51px; on the left column "profile_leftside" which works but when more apps are added to the left side it displays past the bottom border..doesn't stay contained in "pageContent".

Basically here's my layout...

<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>

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;
}

Just trying to get "profile_leftside" at the top left without breaking the content at the bottom. Maybe theres a better way to lay this out?

Thanks!

Answer 1

I've always found CSS frameworks to be very helpful. Many of them have been proven again and again, and it takes abstracts you up a layer above having to worry about specific CSS layout problems.

I've used Blueprint CSS for many things, but have also heard good things of the 960 Grid system.

Blueprint CSS: http://www.blueprintcss.org/
960 Grid System: http://960.gs/

Regards,
Chris