DTP


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


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 02-16-2008, 02:59 AM   #1
sooshi
Member
 
Join Date: Jan 2008
Posts: 10
Default 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>
sooshi is offline   Reply With Quote
Old 02-16-2008, 03:59 AM   #2
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

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

Kelvyn is offline   Reply With Quote
Old 02-16-2008, 07:22 AM   #3
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

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]
ktinkel is offline   Reply With Quote
Old 02-16-2008, 08:39 AM   #4
sooshi
Member
 
Join Date: Jan 2008
Posts: 10
Default

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.
sooshi is offline   Reply With Quote
Old 02-16-2008, 09:22 AM   #5
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by sooshi View Post
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!

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 02-18-2008, 06:57 AM   #6
sooshi
Member
 
Join Date: Jan 2008
Posts: 10
Default

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
sooshi is offline   Reply With Quote
Old 02-18-2008, 10:49 AM   #7
annc
Sysop
 
annc's Avatar
 
Join Date: Oct 2004
Location: Subtropical Queensland, Australia, between the mountains and the Coral Sea
Posts: 4,434
Default

Quote:
Originally Posted by sooshi View Post
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.

   
__________________
annc is offline   Reply With Quote
Old 02-18-2008, 10:58 AM   #8
sooshi
Member
 
Join Date: Jan 2008
Posts: 10
Default

Thanks for your reply.
But without {left:29px} how would I keep the little space between select1Conainer and select2Container?
sooshi is offline   Reply With Quote
Old 02-18-2008, 11:10 AM   #9
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by sooshi View Post
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.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 02-18-2008, 12:36 PM   #10
sooshi
Member
 
Join Date: Jan 2008
Posts: 10
Default

Thanks annc & ktinkel.
Unfortunately, the problem didn't go away.
I really have no clue…
sooshi is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

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


All times are GMT -8. The time now is 05:33 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.