View Full Version : Problem with vertical-align: bottom

11-06-2009, 08:18 PM

I have a problem with the following page:
http://www.lotusfloralart.no/bilde_nyheter.html (http://www.lotusfloralart.no/bilde_nyheter.php)

The picture is supposed to be on the bottom of the black area, not in the middle.

Can anyone tell me whats wrong?

11-06-2009, 09:06 PM
Well, it seems like a very awkward way to build a page. With half your CSS in the head and half your CSS inline on elements without any classes or IDs..

It looks to me like #Layer2has no width specified so it is just getting the height of its content and it only fills half the black area (actually I'm not sure why you even need the Layer2 because it seems extraneous, but I don't know where you are going with this). I don't think you can use vertical-align like that at all. It is used to position things inline or in tables and that's about it. Getting floats to go to the bottom of a container without content actually pushing them down is beyond my knowledge (if it is even possible).

You can find an excellent technique for making a footer stick to the bottom of a page here http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page. That may or may not be exactly what you're after but it could give you some ideas either way.

My guess is that what you are trying to do there is much simpler than that though and you might just want to put position:relative on the container (currently layer2) of the div holding the picture and make it the same height as the black area (maybe just use height:100%) and then use absolute positioning on the div holding the picture. Note that if you just got rid of Layer2, then Layer 1 would be the container and it is already the right height and since it is absolutely positioned already it wouldn't need the position:relative (although I can't see any reason to make that Layer1 absolute anyway and I think you could just as well use relative).

so if you don't need Layer2 put the 'div with image' in Layer1 (and scrap Layer2) then absolutely position the div with image inside Layer1.
if you really need Layer2 then give it relative position and appropriate height and absolutely position 'div with image' inside Layer2.
absolutely position Layer2 at the bottom of the area and use some other positioning for the 'div with image' inside Layer2.
use some other method (as per the link) to stick your image to the bottom of an area. If you want the picture to stick to the bottom but still be able to get pushed off the page by additional content then that link is the way to go. It is a very easy tutorial too.

You might want to be a little more specific about the layout you are trying to achieve and why this image needs to be there in specific as the overall layout should be a consideration when choosing what technique to use.
Also I think you should tidy up your code, move all the css into the head (or a separate file), but don't use it inline in the <body>. When you have divs with styles applied to them but no class or id it becomes difficult to talk about them, requiring me to refer to things like the 'div with image'.

edit: oh, and here is some info on vertical-align, an often misunderstood property.

11-07-2009, 09:06 AM
You could apply position:relative; on the container div and
position:absolute;left:0;bottom:0 on that image.