Grow your CSS skills. Land your dream job.

[Solved] Side menu not 100% height

  • # January 28, 2010 at 11:11 pm

    I have a web site where the layout of my pages are done with tables (began years ago).

    I want to replace those tables by using divs instead.

    I read some ebooks on the subject and visited some forums too but I can’t find why the following does not work:

    My original web page (http://www.maitrebart.net/exphotos/lapoc/fleuve.htm) uses tables (no css).

    I tried replacing the table forming the header, menu and content by div. However, I cannot get the menu side to spread 100% in height.

    I read that all parents (from html down to the menu’s div) must have height set to 100%. That is what I did: http://www.maitrebart.net/exphotos/lapoc/fleuve2.htm (using http://www.maitrebart.net/exphotos/lapoc/fleuve2.css). That is the closest result wrt the original: the side menu extends down but not enough.

    I read that when scroll bars appear, it’s preferable to use margin-top/bottom and set them to 0px instead of using height: 100%; . That is what I did: http://www.maitrebart.net/exphotos/lapoc/fleuve1.htm (using http://www.maitrebart.net/exphotos/lapoc/fleuve1.css). This seems not working at all.

    I test in firefox (with firebug) and checked also in IE6 and Chrome.

    I tried different DOCTYPEs, different combinations of margin and height without any result in getting the same as the original as far as the side menu is concerned.

    Note: You may forget about the small tables used to package the images and texts together. Those tables are not the main issue. I will try to convert them later, once the main layout is ok.

    I would appreciate if anyone knowledgeable can tell me what is wrong in what I did.

    Thank you.

    # January 29, 2010 at 5:01 am

    Put the wide #menuside image on the #container, that way it will go all the way down and remove the background image from the menuside and the smaller bg image from the container.

    # January 29, 2010 at 7:38 am
    "virtual" wrote:
    Put the wide #menuside image on the #container, that way it will go all the way down and remove the background image from the menuside and the smaller bg image from the container (I guess you meant "contentside" here).

    I did what you suggested (locally on my computer) and it works only in IE6, but not in firefox nor chrome (and I wonder why, since your suggestion makes very much sense).

    Thanks for your suggestion.

    # January 29, 2010 at 7:46 am

    Following your suggestion, and inspecting the document with firebug in firefox, it looks like the "container" is significantly shorter than the "contentside"????? (which makes the "film strip" not expanding fully down)

    I wonder why the container is shorter than its content though all my tags are 100% in height???

    # January 29, 2010 at 9:02 am

    I replied very quickly to your post. It is not about using 100% height. Let me try to explain a bit better.
    When you have a background image that you want to repeat all the way down the page, but within that page you have columns of different lengths, the only way to accomplish this is to put the background image on the container which will then hold the different lengths of column. Said columns will expand down according to the amount of content you put within them. The longest div inside the container will make the background image repeat-y (down)
    So your structure would look like this:

    Code:
    Your menu would go here
    Your main content which is usually longer than the menu will go here

    Obviously in this situation your header and footer div would be placed outside the container div and may need to go within another wrapper div to keep everything centered.

    If this is not clear, post what you have so far and I will take another look at it… ;)

    P.S. I just read your comment within the quote, and I meant on the container not the contentside. The container contains both the menuside and the contentside.

    # January 29, 2010 at 7:31 pm

    Very well explained, thank you very much. The div structure you mention is the one I used, but the background image ("film strip") was in the wrong div. Locally, on my machine, I corrected the situation: I put the background image (film strip) in the container, and removed it from menuside. Now it appears ok in IE6 but not in Firefox nor Chrome. On those 2 browsers, the "film strip" does not go down all the way.

    Using Firebug, I can see the "container" stops about 1/3 of content side??? How can it be possible?

    I just made some more tests and I can see that when I reduce the browser window (firefox and chrome), the film strip shortens too! It looks like the height of the container varies with the height of the browser’s window (no matter the size of the contentside), with some kind of fixed offset from the bottom of the window.

    The maximum height of the film strip (or container) seems to be reached when the browser window is maximized to full screen. (I wish I would have a longer monitor!)

    Did you ever see that phenomenon before?

    # January 29, 2010 at 7:47 pm

    You know what? I just removed the "height: 100%" from the html and body tags it it worked!
    In fact, I removed it from every tags.
    I really started in the wrong direction with this "height = 100% everywhere" thing I read somewhere…

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

You must be logged in to reply to this topic.

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