Help with Layout please

[<?davec]

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. I've tried placing the status at the top with left padding on the status text..and position: absolute; top: -51px; on the left column... which works but when more apps are added to the left side it displays past the bottom border..not contained.

This is what I've tried...

At the top I have my status and tabs...

<div style='background: #f7f7f7; border-bottom:1px solid #DDDDDD; width: 100%;'>
<div style='padding: 10px 10px 0px 225px;'>
[I]STATUS AND TABS HERE // EXPANDS VERTICALLY WHEN STATUS IS UPDATED[/I]
</div>
</div>

Left column...

<div class='leftColumn' Xwidth='200' style="position: absolute; top: 51px;" id="profile_leftside" container="root" stripe="0">
[I]LEFT SIDE APPS[/I]
</div>

Right column...

<div id="rightColumn">
[I]TAB CONTENT[/I]
</div>

Any suggestions what to add to the left column to position it to the top and still keep it contained? I've tried adding: position: relative; to the surrounding div...but no luck :|
Thanks!

[JRM]

That code is somewhat mangled.
You have a class, then a style, then an ID ?
Not to mention the other stuff that isn't valid CSS!
Also, you didn't include the CSS file. ( who knows what surprises lurk in there!)
Try running this though a validator, then get back to us.

[<?davec]

Hey, sorry cleaned it up. Basically here's my layout...

<div id="pageContent">

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

<div id="profileContent">

<div id="profile_leftside" container="root" stripe="0">
[I]LEFT SIDE APPS[/I]
</div>

<div id="profile_rightside">
[I]TAB CONTENT[/I]
</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;
}

Basically I'm just looking for the best way to lay this out and fix the problem with it not staying contained in the outer div..overlapping the bottom border. I can't think of anything else besides using position: absolute -51px; on the left side. Any suggestions?

Thanks

[JRM]

<div id="profileContent">

<div id="profile_leftside" container="root" stripe="0">
LEFT SIDE APPS
</div>

As far as I know container and stripe are not valid HTML.
Is ProfileContent what you are referring to as the outer div?
try:

#profile_leftside {
  
  width: 200px;
  position: absolute; left:0 ; top: 51px;
  
}

this should land the inner div to the left, down 51 pix from the top of the outer div.(ProfileContent)

[<?davec]

Hi there,

container and stripe are needed for an apps plugin I'm using..just ignore those. The outside container is "pageContent"...I need the background the tabs are on to go under the profile photo on the left...take a look at facebook profile page..basically need the same layout..the only difference is theirs spans 100% in width and I need to keep my content contained in the border.."pageContent". When I add position: absolute; top: 51px; to "profile_leftside" its positioned in the right spot but messes up the content being contained..."pageContent" is no longer holding the left side...overlaps and extends vertically past the bottom border when apps are added to the left side..maybe I need to use position relative on something..or a completely new way of laying this out?

Thanks for your help

[JRM]

OK, you need to study how the "box model" works as it relates to the CSS.
You have boxes within boxes. the CSS you have is related to the nearest div which is
ProfileContent, not PageContent. You need to lock the profilepCcontent where you want it within the pageContent div. I don't know about the content issue maybe the size 200px might not be enough and it's wrapping?

[<?davec]

Thanks took a look at some box model stuff, tried a few more things..added another div around leftside, played around with relative, absolute...still can't get it, seems so simple but its not. :(

[<?davec]

OK got it working!