Bottom image alignment

[Kasatka]

I'm just doing a simple website for somebody else with frames. The left frame has the menu, with images as the links (just reading "about me" "links" stuff like that).

At the bottom of the list is an image of the dolphin that I want to be flat against the left margin and the bottom of the page.

I did leftmargin=0 (which somebody called Microsoft's pseudo-CSS) and that's fine, but I can't get it to align right up against the bottom of the page.

I don't want to use absolute positioning because I want this page to work in different sized browser windows.

Any suggestions?

[Birdman]

That sounds like it could be difficult. You could style your image with margin-bottom: 100%, but IE will mess it up.

Maybe use JavaScript to get the window height, and then use absolute positioning to slide it to the bottom.

Just a thought :) Welcome to Webmaster World!

[DrDoc]

How about this?

.myclass {
position: absolute;
left: 0px;
bottom: 0px;
}

[Birdman]

Ah, just what the doctor ordered ;) That one flew right over my head. Good solution.

[Kasatka]

Er, okay, my knowledge of CSS comes from looking at code on other pages and playing with it until I figure out what it does. (Doesn't always work, but usually I do well with it.)

But anyway, I'm not exactly sure what to do with that little snippet in there as I've never run across it before. (Really, I should break down and buy a book and plow through it.) Do I have to specify something with the image itself to say I want that particular image at the bottom?

[Birdman]

Don't break down yet. Start with Nick's CSS Tutorial [webmasterworld.com] and use W3schools [w3schools.com] as a reference.

The easiest way for now, just to test, is to try inline:

<img style="position: absolute; left: 0px; bottom: 0px;" src="your/path" />

[Kasatka]

Oooh, thank you.

If I was a hugging person I'd give you a hug.

=)

[DLadybug]

When I tried that, I got my div at the bottom of the browser window, not at the bottom of the page. I'm missing something about parent elements I'm thinking. I'll read up on that. But this is the only way I've been able to place a div at the bottom of my page..and pixel counting shouldn't be the basis for placement, I know.

#content3 {position:absolute;
left:2px;
top:1230px;
border:ridge 2px #ccffff;
background:ffffff;
font:12px, "Arial";
color:#333399;
width:70%;
z-index:4;
padding:2px;
margin-bottom:2px;}

If I take off the 3rd line and replace it with bottom:0px and ax the last 2 lines, the div just camps mid-page.

Ideas?
Dian :)

[antidote]

You could make your image a background image in that particular frame and use the following:

body {
background-position: bottom left;
}

This way it will stay there no matter what size your user makes his/her window.

[DLadybug]

This is clearly "Icehouse ralated" as is much of what I do on Sat night after a night out...but, um...Frames? oh. If we're talking frames, I'm in the wrong discussion. I was hoping to use that for placement without frames..

OOOps. Is there a penalty for not paying attention?

Dian :)

[Jello]

Found this older thread:
[webmasterworld.com ]