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>

Kelvyn · 02-16-2008, 04:59 AM

I have not looked in detail, but you dont seem to have cleared the floats. You probably need a <br clear="all" /> or similar before the footer.

ktinkel · 02-16-2008, 08:22 AM

I think you are going overboard with position statements; you should be able to do this with floating columns and footer.

Use float: left and clear: all in the code for the footer.

I think the layout you want is similar to what we do on our Home page (though we no longer have a third column, we used to). There are no position statements in the CSS.

sooshi · 02-16-2008, 09:39 AM

Thanks ktinkel! I got it to work finally by adding {float:left} and {clear:both} to container-foot

I also got rid of unnecessary position statements as you advised.

ktinkel · 02-16-2008, 10:22 AM

Quote:

Originally Posted by sooshi

Thanks ktinkel! I got it to work finally by adding {float:left} and {clear:both} to container-foot

I also got rid of unnecessary position statements as you advised.

Yay!

sooshi · 02-18-2008, 07:57 AM

Hi guys,

I have another urgent question concerning the same layout.

(http://cie7273.com/test/test.html)

The column with lists is not correctly aligned horizontally under IE 7. It should be aligned left with the rest of the layout. Instead, it appears a few pixels to the right.

Can anyone tell me what I'm doing wrong?

Thanks in advance

annc · 02-18-2008, 11:49 AM

Quote:

Originally Posted by sooshi

The column with lists is not correctly aligned horizontally under IE 7. It should be aligned left with the rest of the layout. Instead, it appears a few pixels to the right.

I think it's the left: 29px in select2Container.

sooshi · 02-18-2008, 11:58 AM

Thanks for your reply.
But without {left:29px} how would I keep the little space between select1Conainer and select2Container?

ktinkel · 02-18-2008, 12:10 PM

Quote:

Originally Posted by sooshi

Thanks for your reply.
But without {left:29px} how would I keep the little space between select1Conainer and select2Container?

I usually control that by using margin-right on the object at the left; or by margin-left on the thing to the right. No positioning — just float.

sooshi · 02-18-2008, 01:36 PM

Thanks annc & ktinkel.
Unfortunately, the problem didn't go away.
I really have no clue…

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>

02-16-2008, 04:59 AM	#2
Kelvyn Staff Join Date: Feb 2005 Location: In the Heart of the English Lake District Posts: 1,381	I have not looked in detail, but you dont seem to have cleared the floats. You probably need a <br clear="all" /> or similar before the footer. __________________ Kelvyn Web site design, hosting and marketing, Keswick in the UK Lake District If you are planning a visit to Keswick then try Keswick Tourist Information website

02-16-2008, 08:22 AM	#3
ktinkel Founding Sysop Join Date: Oct 2004 Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound. Posts: 11,187	I think you are going overboard with position statements; you should be able to do this with floating columns and footer. Use float: left and clear: all in the code for the footer. I think the layout you want is similar to what we do on our Home page (though we no longer have a third column, we used to). There are no position statements in the CSS. __________________ [SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE] [SIGPIC][/SIGPIC]

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to 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

02-16-2008, 09:39 AM	#4
sooshi Member Join Date: Jan 2008 Posts: 10	Thanks ktinkel! I got it to work finally by adding {float:left} and {clear:both} to container-foot I also got rid of unnecessary position statements as you advised.

02-18-2008, 07:57 AM	#6
sooshi Member Join Date: Jan 2008 Posts: 10	Hi guys, I have another urgent question concerning the same layout. (http://cie7273.com/test/test.html) The column with lists is not correctly aligned horizontally under IE 7. It should be aligned left with the rest of the layout. Instead, it appears a few pixels to the right. Can anyone tell me what I'm doing wrong? Thanks in advance

02-18-2008, 11:58 AM	#8
sooshi Member Join Date: Jan 2008 Posts: 10	Thanks for your reply. But without {left:29px} how would I keep the little space between select1Conainer and select2Container?

02-18-2008, 01:36 PM	#10
sooshi Member Join Date: Jan 2008 Posts: 10	Thanks annc & ktinkel. Unfortunately, the problem didn't go away. I really have no clue…