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.