Page 1 of 1

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

Posted: Thu Nov 01, 2007 2:08 pm
by 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.

Re: How to make a (content) div 100% high

Posted: Thu Nov 01, 2007 7:36 pm
by 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

Re: How to make a (content) div 100% high

Posted: Thu Nov 01, 2007 8:30 pm
by Dr.CSS
You need to add one more at the bottom for pagewrapper...

May be why the black shows below content...

Re: How to make a (content) div 100% high

Posted: Thu Nov 01, 2007 10:55 pm
by kermit
the black is showing because of a min-height set on div#pagewrapper

Re: How to make a (content) div 100% high

Posted: Fri Nov 02, 2007 8:25 am
by 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.

Re: How to make a (content) div 100% high

Posted: Fri Nov 02, 2007 9:06 am
by 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

Re: How to make a (content) div 100% high

Posted: Fri Nov 02, 2007 9:24 am
by 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

Re: How to make a (content) div 100% high

Posted: Fri Nov 02, 2007 9:33 am
by 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!

Re: *solved* How to make a (content) div 100% high

Posted: Fri Nov 02, 2007 9:37 am
by 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.