Lively discussions on the graphic arts and publishing — in print or on the web

sooshi · 02-16-2008, 03:59 AM

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>
<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>

<style type="text/css">

</style>

02-16-2008, 03:59 AM	#1
sooshi Member Join Date: Jan 2008 Posts: 10	CSS positioning problem 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> <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> <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>

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Switch to Hybrid Mode Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
I've got a problem!	Michael Rowley	Hardware & Gadgets	35	01-25-2008 07:35 AM
CSS positioning help	dacoyle	Web Site Building & Maintenance	23	02-24-2007 12:32 PM
AIM Problem	dthomsen8	The Corner Pub	1	04-07-2006 12:42 PM
CSS positioning	dacoyle	Web Design	2	11-14-2005 07:40 PM