By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,987 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

CSS positioning problem

P: 4
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]
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. <!--
  3. #container-page {
  4. left:50%; 
  5. margin-left:-381px; 
  6. width: 762px; 
  7. position: relative; 
  8. top:0px; 
  9. min-height: 100%; 
  10. height: auto; 
  11. height: 100%;
  12. }
  13.  
  14. #container-content {
  15. padding-bottom: 20px;
  16. }
  17.  
  18. #container-foot { 
  19. width: 760px; 
  20. height: 20px; 
  21. position: absolute; 
  22. bottom: 0;
  23. bottom: -1px;
  24. }
  25.  
  26. #container-columns { 
  27. width:760px; 
  28. top: 0px; 
  29. position:relative; 
  30. display:block;
  31. }
  32.  
  33. #col1 { 
  34. position: relative; 
  35. top: 0px; 
  36. left: 1px; 
  37. width: 234px; 
  38. padding-bottom:40px; 
  39. background-color:#cccccc;
  40. }
  41.  
  42. #col2 { 
  43. position: relative; 
  44. top: 0px; 
  45. left: 262px; 
  46. width: 234px; 
  47. padding-bottom:40px; 
  48. background-color:#cc0000; 
  49. }
  50. -->
  51. </style>
Feb 16 '08 #1
Share this Question
Share on Google+
6 Replies


just a feeling
P: 87
Hi sooshi,

use float:left and remove the position:absolute style from #container-foot. Kindly, early and often test ur pages through
HTML validator
CSS validator

Good Luck.
Feb 16 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
And use a proper doctype.
Feb 16 '08 #3

P: 4
It works! Thanks guys!
Feb 16 '08 #4

P: 4
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
Feb 18 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
An 'id' is a unique name assigned to only one element on a page. Validate your html for that list of errors, then validate your css for the error there.

If those don't work, add margin:0 and padding:0 to the lists and/or containers.

What's with all the divs around the list?
Feb 18 '08 #6

P: 4
Thanks for that. Unfortunately, it doesn't seem to do the trick.
Feb 19 '08 #7

Post your reply

Sign in to post your reply or Sign up for a free account.