7 replies [Last post]
thegreyarea
Offline
newbie
London
Last seen: 15 years 7 weeks ago
London
Joined: 2006-12-05
Posts: 7
Points: 0

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!

Triumph (not verified)
Anonymous's picture
Guru

Link.

Link.

thegreyarea
Offline
newbie
London
Last seen: 15 years 7 weeks ago
London
Joined: 2006-12-05
Posts: 7
Points: 0

the code

sorry, page isnt online as yet but this is my html:











Section  
Section  
Section  
Section  
Section  




Welcome to...

Lorem ipsum












and the relevant sections of my stylesheet:

body
{
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #D1D1D1;
margin: 0px;
padding-top: 10px;
}

#main
{
width: 780px;
margin: 0 auto;
background-color: #FFF;
border: none;
}

#titlebar
{
height: 130px;
width: 780px;
background-image: url('../images/test_bg.png');
background-repeat: no;
}

#titlebar img
{
padding: 0;
margin: 0;
border: none;
text-decoration: none;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

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.

Verschwindende wrote:
  • CSS doesn't make pies

thegreyarea
Offline
newbie
London
Last seen: 15 years 7 weeks ago
London
Joined: 2006-12-05
Posts: 7
Points: 0

doctype info

thanks for the advice!

and sorry, this is the head/doctype info




Title...

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

thegreyarea
Offline
newbie
London
Last seen: 15 years 7 weeks ago
London
Joined: 2006-12-05
Posts: 7
Points: 0

sorted

i added a new div wrapper for my images called buttonwrap:

#buttonwrap { position: absolute; bottom: 0px; left: 190px; height: 81px; width: 400px; padding: 0; }

although this involves another nested div it seems to do the trick. thanks again pineapplehead!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

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

bottom: 0;
left: 0;

the next would be:

bottom: 0;
left: (width of first image);

then the third image:

bottom: 0;
left: (width of image 1 & 2);

and so on.

Verschwindende wrote:
  • CSS doesn't make pies

thegreyarea
Offline
newbie
London
Last seen: 15 years 7 weeks ago
London
Joined: 2006-12-05
Posts: 7
Points: 0

fantastic!

i followed your advice and its working perfectly, thanks again!