Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    18
    Thanks
    1
    Thanked 1 Time in 1 Post

    Problem with vertical-align: bottom

    Hi!

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


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

    Can anyone tell me whats wrong?

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    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/k...om-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.
    or
    if you really need Layer2 then give it relative position and appropriate height and absolutely position 'div with image' inside Layer2.
    or
    absolutely position Layer2 at the bottom of the area and use some other positioning for the 'div with image' inside Layer2.
    or
    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.
    http://phrogz.net/CSS/vertical-align/index.html
    Last edited by linehand; 11-06-2009 at 08:35 PM.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You could apply position:relative; on the container div and
    Code:
    position:absolute;left:0;bottom:0
    on that image.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •