A
Alex
Hi
Please see http://www.alex-myly.ch/css_testpage.html for the testpage
I created to solve and demonstrate my problem
I would like to create a page with a top header and a footer which
always sticks to the bottom of the Viewport or the bottom of the page
(whichever is lower).
Between header and footer there are two columns (left sidebar and main
content). left sidebar and main page should be separated by a full
screen vertical line. The line has to go all the way done to a few
pixels above the footer.
I found a tutorial to have to footer problem solved. But I can't
manage to create the vertical line.
I applied some ugly coloring to my page so you can see which div is
taking which part of the page.
For me the problem seems to be the "content". In CSS it has
min-height: 100% and height : auto but it does not take all the
remaining height of it's parent.
When I assign a absolute value to content's height (say 600px) sidebar
and contentMain will grow accordingly.
Can someone help me and tell me what I am missing?
I am testing with latest FireFox and Opera.
Here is my page layout:
Code:
<html>
<body>
<div id="page">
<div id="nonFooter">
<div id="header">
</div> <!-- header -->
<div id="content">
<div id="left_sidebar">
</div> <!-- left_sidebar -->
<div id="contentMain">
</div> <!-- contentMain -->
</div> <!-- content -->
</div> <!-- nonFooter -->
<div id="footer">
</div>
</div> <!-- page -->
</body>
</html>
Thanks for any hint
Alex
Please see http://www.alex-myly.ch/css_testpage.html for the testpage
I created to solve and demonstrate my problem
I would like to create a page with a top header and a footer which
always sticks to the bottom of the Viewport or the bottom of the page
(whichever is lower).
Between header and footer there are two columns (left sidebar and main
content). left sidebar and main page should be separated by a full
screen vertical line. The line has to go all the way done to a few
pixels above the footer.
I found a tutorial to have to footer problem solved. But I can't
manage to create the vertical line.
I applied some ugly coloring to my page so you can see which div is
taking which part of the page.
For me the problem seems to be the "content". In CSS it has
min-height: 100% and height : auto but it does not take all the
remaining height of it's parent.
When I assign a absolute value to content's height (say 600px) sidebar
and contentMain will grow accordingly.
Can someone help me and tell me what I am missing?
I am testing with latest FireFox and Opera.
Here is my page layout:
Code:
<html>
<body>
<div id="page">
<div id="nonFooter">
<div id="header">
</div> <!-- header -->
<div id="content">
<div id="left_sidebar">
</div> <!-- left_sidebar -->
<div id="contentMain">
</div> <!-- contentMain -->
</div> <!-- content -->
</div> <!-- nonFooter -->
<div id="footer">
</div>
</div> <!-- page -->
</body>
</html>
Thanks for any hint
Alex