i'm not sure if this is the right section so apologies if its not, as you can see, its my first post!
i'm trying to align 5 images to the bottom of a div and i'm not sure how to go about it. i've tried making the images position:absolute; bottom:0px; but this puts them at the bottom of the page. the div has nothing else in it, but does have a background.
should i be creating a new div to put my image in or is there another easier way to do this? any help would be greatly appreciated.
thanks in advance!
sorry, page isnt online as yet but this is my html:
and the relevant sections of my stylesheet:
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0 auto;
We really want to see the
We really want to see the entire HTML code (doctype and all) but you were on the right tracks with your first post.
Absolute Positining is a simple way to put things where you want, but you need to understand it.
The parent element needs a position set, so the AP child elements have a reference point.
For instance, if you put an AP element in a nested div tag, it will probably display at the bottom of the page. This is because it's taking its ref point from the BODY element.
Adding position: relative; to the parent element (the <div>) will allow you to use AP.
Let us know how you get on.
thanks for the advice!
and sorry, this is the head/doctype info
i followed your advice and made the div position relative and then the images 'position:absolute; bottom:0px;' and it worked, the images are aligning to the bottom of the div, but now they're all on top of eachother, i tried making them all float:left but this just made them stack on top of eachother on the left!
am i missing something really obvious? i feel like i am! i think its turning into one of those days
i added a new div wrapper for my images called buttonwrap:
although this involves another nested div it seems to do the trick. thanks again pineapplehead!
You shouldn't need that
You shouldn't need that extra div, and you can't mix absolute positioning with floats!
What you SHOULD do is specify the bottom and the left positioning of the images. For example, the first image would have
the next would be:
left: (width of first image);
then the third image:
left: (width of image 1 & 2);
and so on.
i followed your advice and its working perfectly, thanks again!