4
The height of my page needs to be flexible as the page contains columns with lists which can vary in length. I also have a footer which needs to be stuck to the bottom.
I managed to do all of the above. My problem now is the positioning of the columns. With relative positioning, the columns appear staggered with column2 starting lower than column1.
If I use {float:left}, the two columns stay next to each other which is good but then the footer brings itself up and overlaps with the columns... I don't know if I am clear with my explanation so here is my code. Thanks in advance!
HTML:[html]
<html>
<body>
<div id="container-page">
<div id="container-content">
<div id="container-columns">
<div id="col1">
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</div>
<div id="col2">
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</div>
</div >
</div >
<div id="container-foot">footer</div >
</div>
</body>
</html>
[/html]
Expand|Select|Wrap|Line Numbers
- <style type="text/css">
- <!--
- #container-page {
- left:50%;
- margin-left:-381px;
- width: 762px;
- position: relative;
- top:0px;
- min-height: 100%;
- height: auto;
- height: 100%;
- }
- #container-content {
- padding-bottom: 20px;
- }
- #container-foot {
- width: 760px;
- height: 20px;
- position: absolute;
- bottom: 0;
- bottom: -1px;
- }
- #container-columns {
- width:760px;
- top: 0px;
- position:relative;
- display:block;
- }
- #col1 {
- position: relative;
- top: 0px;
- left: 1px;
- width: 234px;
- padding-bottom:40px;
- background-color:#cccccc;
- }
- #col2 {
- position: relative;
- top: 0px;
- left: 262px;
- width: 234px;
- padding-bottom:40px;
- background-color:#cc0000;
- }
- -->
- </style>
