Topic: Img positioning question (Page 1 of 1)

I have a question about the best way to position an image and text at the bottom of a div. Here's what they want:



Here's the entire page if you want a feel for it: http://www.11oh1.net/kamel

What would be the best way to do that? I know I could position the image down there by simply setting margins for it but what about getting the text next to it? Should I use a p-tag and set margins for that? Put it in a div? Float it?

I haven't done much coding in a while so I'm fairly rusty and out of date on the different techniques.

:::11oh1:::

Yes float the image, I recommend reading Maxdesign's float tutorial for a good understanding of how this will work.

Cheers,

Thanks Blaise, that worked to position the text where I want in relation to the image.

Now, what's the best way to force that sucker to always be at the bottom? I could do it by fiddling with the top margin but that doesn't work so well as the browser is resized to strange dimensions.

:::11oh1:::

You want #imgcaption to always be at the bottom of #mainarea?

Yep, that's the idea. Always at the bottom but with some padding on the left so it doesn't bunch up against the browser.

I worked it out using some absolute and relative positioning but I'd rather not resort to something like that if I can help it.

:::11oh1:::

I would like to see if there's a better way to do this as well. I have always just used absolute positioning with the bottom set to 0px. It works I guess.

On a side note, the address stuff I would change. I just don't like using breaks like that. I've always been told that, that is using html to format the text when that is what CSS is for. So...how about using a list and set the ul list-style-type:none ?

Just a thought

Later,

C:\

I generally place illustrative images in a P tag with a class called figure which is basically a float, with some margin to not stick to the surrounding content, and styling for the caption ( the text in the P tag ). I also set the clear attribute of the Hx tags to make sure they're messed up.

Well I thought I had this all fixed till my gf looked at it in Safari and it looks like zees:



It looks nice and pretty in IE and FF 1.5 so what's the dealio? http://www.11oh1.net/kamel

I did it by relatively positioning the main div and absolutely positioning the div with the image and address info. Seemed to be the only solution I could find.

:::11oh1:::

It is the only solution that comes to mind, and is actually similar to something I had to do on a recent site I coded.

I noticed that if your content goes down further or if you increase your text size it overlaps the absolutely positioned element. This is no good.

Maybe try wrapping your copy in a new div and set the bottom-padding to about 180px to account for the #bottom element (with a little extra breathing room). This should get rid of the overlap. If that doesn't work, you could always use a table.

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>#copy</td>
        <td rowspan="2">#rightimg</td>
    </tr>
    <tr>
        <td valign="bottom">#bottom</td>
    </tr>
</table>

As far as the Safari thing goes, try setting a width to #bottom. Looks like the div does not know how wide it should be, so it is only getting as wide as the image and just pushing the text down.

Ram

Seems like there's not really any good way to do this aside from using a table or using JS. I would have no idea how to go about it using JS either.

I tried the padding thing but that doesn't fix the overlapping copy/image, all it does is expand the main div below the right image when the browser shrinks but the store image remains static.

Setting a width for #bottom fixed the Safari issue though so at least that one is done.

:::11oh1:::

Definitely with CPrompt on this one.

One of the least known positioning (I find) features in CSS is that an absolutely positioned element in a relatively position element is positioned in relation to the former. So, by setting #mainarea to relative and #bottom to absolute, giving #bottom a bottom:0; makes it sit just right. Doesn't matter in this fixed-height scenario here, your top-positioning works okay, but with a variable-height column you couldn't do what you're doing now. However, the above works fine in IE6/PC & FF1.5/PC, and I suspect it might even work in SAF & OP, too.

Re: Ramasax, giving #mainarea a padding-bottom:135px; would keep the content from overlapping. (Edit: this has to be done in conjunction with the paragraph above.) It isn't perfect, but does account for #bottom being removed from the document flow. As I noted above, however, this layout doesn't really allow #mainarea to stretch (given the image on the right), but otherwise this could be worked around.

HTH,
DC

(Edited by divinechaos on 07-08-2006 10:13)

Hey krets - there might be some material in this article at Community MX that would be helpful:
http://www.communitymx.com/content/article.cfm?cid=97480

It's meant for a series of "teaser" thumbnails and descriptions but - might be something in there you could pick out.