[solved] How to make a (content) div 100% high

[SimonSchaufi]

hello!
i am not a pro in css layouts and i am really thinking about making a table layout because it is MUCH easier.
i would like to make the main div 100% high so that there is no black space to the bottom in this website i am working on:

www . dropcomics . com

the other prob i have it that the left side MUST be at least that high that the links are not outside the divs (another advantage of a table!) How can i achieve that? IE will not understand min-height.

[KO]

I've not found a way to extent height to 100% of it's container with CSS and XHTML. If someone knows I would like to know. But this is not really problem as you get around it very easily with pure CSS and XHTML.

div#sidebar {
  float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
  width: 108px;    /* sidebar width, if you change this please also change #main margins */
  display: inline;  /* FIX IE double margin bug */
  margin-left: 0;
  padding-top: 300px;
  background:#000 url(/uploads/images/template/dropcomic.png) no-repeat;

}

div#subnav{
  padding: 1em 0 1em 0;  /* some air above and under menu and content */
  text-align:center;
background:#000;
}

div#topnav{
  padding-top: 1em;  /* some air above and under menu and content */
  text-align:center;
background:#000;

}

div#content {
background:#fff;overflow:auto;
}

Now left does not keep it's black background unless you put background image for content with repeat-y that mimicks that.

The other problem I do not understand.

Br, K

[Dr.CSS]

You need to add one more at the bottom for pagewrapper...

May be why the black shows below content...

[kermit]

the black is showing because of a min-height set on div#pagewrapper

[SimonSchaufi]

ok, i used the modifications from KO but the overflow creates a scrollbar in the content which i dont want. now i have the problem that the content is not as high as the sidebar.

[KO]

You probably need to put after #content_text closing which stretches it at least to the same level as #sidebar. Or you put which should be the same.

In Firefox that page is set width but in IE6 it's liquid. Also distionary "comics |ˈkämiks| " has and issue with ' which comes as box.

br, K

[KO]

If you add this image to your content with:

div#content {background:#fff url(black-white.gif) repeat-y 0 0;}

you have 2-column layout where both of the colums look exact height.

br, K

[SimonSchaufi]

in which browser is a problem? ie works, firef. works so i think there is no need for that again but THANX for solving the problem!

[KO]

Firefox 2.0.0.8

I never allow javascript so that might be something to do with it.

You also might want to check tagcloud page with IE6.