469,954 Members | 1,773 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,954 developers. It's quick & easy.

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!

<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
6 1334
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
7,435 Expert 4TB
And use a proper doctype.
Feb 16 '08 #3
It works! Thanks guys!
Feb 16 '08 #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
7,435 Expert 4TB
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
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.

Similar topics

12 posts views Thread by Tom Szabo | last post: by
9 posts views Thread by Bryan R. Meyer | last post: by
4 posts views Thread by Jane Withnolastname | last post: by
14 posts views Thread by Harlan Messinger | last post: by
6 posts views Thread by rajek | last post: by
9 posts views Thread by Frances Del Rio | last post: by
11 posts views Thread by NS | last post: by
2 posts views Thread by TheCruelPanda | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.