By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
463,124 Members | 550 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 463,124 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!

<div id="container-page">
<div id="container-content">
<div id="container-columns">
<div id="col1">
<div id="col2">
</div >
</div >
<div id="container-foot">footer</div >
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. }
  14. #container-content {
  15. padding-bottom: 20px;
  16. }
  18. #container-foot { 
  19. width: 760px; 
  20. height: 20px; 
  21. position: absolute; 
  22. bottom: 0;
  23. bottom: -1px;
  24. }
  26. #container-columns { 
  27. width:760px; 
  28. top: 0px; 
  29. position:relative; 
  30. display:block;
  31. }
  33. #col1 { 
  34. position: relative; 
  35. top: 0px; 
  36. left: 1px; 
  37. width: 234px; 
  38. padding-bottom:40px; 
  39. background-color:#cccccc;
  40. }
  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

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.


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

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.