Position an Image at the bottom of a DIV?

[Ian G]

I’m setting up speech bubble-like status update message for my users on my site and I’m running into some trouble. There are two basic elements (the user picture and the message content area) that are displayed side-by-side within the main div. The problem I am having is that I need the user image to stay locked on the bottom while the text area grows vertically. Since the image is smaller than the text area, it needs to stay aligned with the bottom edge in order to look right. Right now both the user image and the text area are aligned at the top as they normally would be.

Positioning these element using CSS is not working as I thought it would. I thought I would just use bottom: 0px, left 0px; or something on the image or the surrounding div and the image would move from the top left to the bottom left, but that is not happening. Any idea what I am doing wrong?

Here is the page with the effect: ecoevolution.org/users/ian_gunsolley

[noahgelman]

bottom:0; and left:0; and such only work when position:absolute; is applied as well. You do that and you should be good ^_^

If you get a problem where the text starts to flow behind image, give the div a bottom padding equal to the image and that should stop it.

I hope that all helps.

[Ian G]

Hmm, still having problems. I was playing around with relative and absolute positioning a bit before this, but I couldn’t get it worked out. Absolute positioning of the image causes the text box to drift over the entire div where the image is located.

Here is what I am working with.. generally speaking the messages are table outputs in odd/even forms, so one message is formatted this way:

Code:

tr class “odd-views-rows-first”
td class “views-field-pid-pic”
div class “picture”
td class “views-field-status-time
[b]text message is here[/b]

As I understand it you absolutely position elements within a relatively positioned parent element. So the first thing I tried was giving the tr class "odd-views-rows-first" and "view-field-pid-pic" a position of relative and then gave the "picture" div the absolute positioning, but this caused the text area (the second td class) to slide over and cover the image. Padding and margin to the image, td class or div didn’t shove the text area back, it just floated the picture around underneath it. I experimented more and the same thing happened if I tried to absolute position directly on the image instead of on the picture div.

I thought since the "picture" div was within a container set with relative positioning, I could absolutely position the image in relationship to the "views-field-pid-pic" td class, therby avoiding the message container moving over at all. What am I missing?

[noahgelman]

Oops, sorry, i left out a few details. Thats my fault. You want an image to stay at the bottom of the div right? The image has to be position:absolute; in order to use bottom:0; and left:0; AND the div it’s in has to be postion:relative. I forgot to mention that detail. Sorry.

[Ian G]

"noahgelman" wrote:

Oops, sorry, i left out a few details. Thats my fault. You want an image to stay at the bottom of the div right? The image has to be position:absolute; in order to use bottom:0; and left:0; AND the div it’s in has to be position:relative. I forgot to mention that detail. Sorry.

You are thinking along the lines of what I was, giving relative positioning to the containing div and then absolute positioning to the image to force it down to the bottom corner. Seems like it should be that simple, but it refuses to play nice. I think the problem is that these are table elements and not just standard divs, something about the table characteristics are throwing off my efforts to style them.

If I throw "position: relative" on the td class "views-field-pid-pic" div, and position absolute on the img tag, it actually drops the img div to the bottom of the entire table, rather than the table row. In addition I notice that what I’ve done so far appears different depending on the browser: IE, Safari or Firefox. The combination of table data, table row css I am using has me a bit turned around…

[noahgelman]

Ah, yes. I missed the tables part. Absolute and relative positioning do not work in tables. Tables are very unhealthy to use. I’d suggest moving over to divs if possible.

[Ian G]

I think I am stuck with the tables, it’s the output of a Drupal module, so I have little control over the layout divs. Each status message update comes out in table form, one after another like facebook or twitter.

[noahgelman]

I dont know what to tell you, I don’t use Drupal

[Ian G]

Thanks noahgelman,

It’s not really a Drupal-specific problem, it’s more of a table/form CSS problem that is being forced upon me whether I like it or not since I don’t have direct control of the layout. I can add or subtract divs to the table template and layout, but I can’t change the fact that it is using tables :( .

Unless someone has a way to make tables segregate CSS positioning to not effect each other, I’m going to implement a workaround for now that doesn’t fix the problem but makes it less visually jarring cuz I’m tired of looking at it.

You’ve won for now CSS, but I’ll be back.
Oh yes…. I’ll be back… :evil:

[birdrockdesigns]

You can add padding to the bottom of the div, then use a background image using background-position: bottom, background-repeat: no-repeat.

[Author]

Posts