Side by side DIV positioning

[timstaines]

I'm trying to get my #text-block div to line up with the lower right corner of image.jpg, which sits inside of my #design div. I feel like I've tried everything, but obviously not. I know I've seen this done before, but I can't quite figure it out. The #text-block div height can be determined by the amount of copy it contains, but I need its lower left corner to line up with the lower right corner of the #design div. Any advice would be much appreciated.

Here's the CSS:

Code: Select all

#container {
   width: 801px;
   margin: 0 auto;
}

#main-content {
   padding: 10px 20px 20px 20px;
   vertical-align: top;
}

#sub-content {
   vertical-align: bottom;
   height: inherit;
}

#design {
   bottom: 0;
   padding: 0px 0px 0px 0px;
   width: 370px;
   height: inherit;
   text-align: left;
   vertical-align: bottom;
}

#text-block{   
   width: 370px;
   height: inherit;
   bottom: 0;
   vertical-align: bottom;
   float: right;
   text-align: left;
}


Here's the on page code.

Code: Select all

<div id="container">
   <div id="main-content">
      <div id="sub-content">
         <div id="text-block">This is how I would like
the text inside this div to align itself. Starting from the
bottom left corner of the div and then working its way
upwards.
         </div>
         <div id="design">
              <div align="right"><img src="../image.jpg"
alt="Art" width="320" height="375" />
              </div>
         </div>
      </div>
   </div>
</div>


Here's a visual representation of the issue:
http://bit.ly/css-problem

Thanks in advance!

Tim

[dflynn]

so you want to create the same effect as text-align="bottom" within a table?


If the #Design div is fixed in width and auto height then you can use
position:absolute; on the other two divs withing the design div
and on the image div use

left:0;
bottom:0;

on the text div use
right:0;
bottom:0;

that will align them both to the bottom of the div and fit the content in.

if its not quite what you were looking for, or for whatever reason it didn't work give me a shout.

[timstaines]

Thanks,

While that solved my alignment issue within #sub-content, now I have a new issue. #subcontent is floating up and out of #main-content. I need the upper limit of #main-content to hold #subcontent down.

Here's what it looks like now: http://bit.ly/css-problem-3

And I need #sub-content to be contained by #main-content.

[dflynn]

Ok ill take a closer look and get back to you asap

[timstaines]

I have a viable but not optimal solution in adding padding to the top of #main-content . . . if you figure out how to have #main-content automatically adjust to the height of #sub-content, let me know.

Thanks again!

[dflynn]

its easy to automatically adjust the heights of divs. just use height:auto

[timstaines]

yeah, when I take my padding out and add the "height: auto;" it blows up. Pushes everything w/i the #main-content through the top of it. When I add 400px to the top padding (which is roughly the size of the image) it tightens up nicely.