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

 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 02-16-2008, 03: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
 

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 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 01:42 PM
CSS positioning dacoyle Web Design 2 11-14-2005 07:40 PM


All times are GMT -8. The time now is 12:37 PM.


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