Hi all,
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]
[code=css]
<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:relati ve;
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>[/code]
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]
[code=css]
<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:relati ve;
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>[/code]
Comment