Grow your CSS skills. Land your dream job.

100% height divs with multiple backgrounds

  • # October 1, 2009 at 5:14 am

    Hello, the problem i have is hard for me to explain, because i’m not too good in english, so i’ll try to show it:
    This is basic layout i want to have
    [img]http://images50.fotosik.pl/208/495c36010b98acad.jpg[/img]

    and those are background images that need to be in specific positions
    [img]http://images46.fotosik.pl/207/1c181fe268ddf992.jpg[/img]

    The first image shows what i want to achieve:
    - Big image in background, about 1600-2000 anchored to top left, no repeat.
    - Header, with no specific content, nor background
    - image on bottom of page (always on bottom) repeated-x, image must be under image from menu
    - Menu filled with background repeated-y, it MUST always have to be stretched to the bottom of page
    - content and footer on right

    And now i have problems:
    i can’t get to work two images: fill of menu, and this image on bottom of page, problem is, that when (for example) bottom image is always on bottom, then menu isn’t scaling with height, and stops right after end of menu content, another problem is, that when i finally stretch menu to bottom, then if content is shorter the bottom image is higher than it should (and should be on bottom).

    I won’t show you any css or html, because i had so many attempts,that i don’t even know which is close to good. I can tell you that last one was header, under it div with display: table, and in that div menu and content with display:table-cell, but of course, it only worked in Opera :/

    Again – sorry for my english, and thanks in advance for help.

    edit: this is project (sorry for 1px border on everything). atm it’s working as it should only in Opera 10 for me. http://czokalapik.pl/projekty/gw/www/

    # October 1, 2009 at 5:47 am

    - Does the page have a centered layout or is it aligned to the left of the body?
    - Do the elements have a fixed width?

    # October 1, 2009 at 6:00 am

    It’s aligned to left
    only menu have fixed width

    sry, i did edited last post, but forgot to paste link :D

    here it is: http://czokalapik.pl/projekty/gw/www/

    edit: one more thing. check class .jumpright, its float:right, why in FF for example such elements like "Komentarze(15)" are on right, but lower than "Doda?(a): Hyper"?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".