Not signed in (Sign In)

Vanilla 1.1.8 is a product of Lussumo. More Information: Documentation, Community Support.

Syntax Highlighting

You can highlight any code you post by wrapping it in the BBCode tags, [code lang="css"]code here[/code]. Other usable lang values are "xml", "html", "xhtml", "css", "js", "javascript", "php", "sql", "python", "py", "ruby", "rb", and "java".

Choose the Format Comments option "SyntaxHighlighter" to use this BBCode. Note that no other BBCode is supported at the moment.

Basic CSS: Side menu not 100% height

Bottom of Page

1 to 2 of 2

- CommentAuthormaitrebart
- CommentTimeJan 29th 2010
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.
- CommentAuthormaitrebart
- CommentTimeJan 30th 2010 edited
Solved: Using the first case (fleuve2), I moved the menuside's background image in the container and I removed all "height: 100%;" from the html tag down to the container's inner divs (menuside and contentside). Also the contentside's background image is not necessary.

1 to 2 of 2