FOOTER. Problem. Does not recognize a DIV with float:right

  • barbaruca
  • Born
  • Born
  • barbaruca
  • Posts: 1

Post 3+ Months Ago

good:

I have a problem and can not find the solution. I want to the footer is placed under two DIV one float: left and another float: right but only recognizes DIV float: left and is superimposed on the content of the Float:right.

Please take a look at this code.

CSS Code: [ Select ]
#container {}
WIDTH: 800px;
/ ** [disabled] HEIGHT: auto; */
/ ** [disabled] text-align: center; */
margin: 0 0 0 0;
display: block;
position: relative;
}
 
#header {}
WIDTH: 100%;
HEIGHT: 125px;
margin-left: auto;
margin-right: auto;
PADDING-BOTTOM: 10px;
PADDING-LEFT: 0px;
PADDING-TOP: 0px;
PADDING-RIGHT: 0px;
}
 
#headerWrapper {}
WIDTH: 100%;
margin-left: auto;
margin-right: auto;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
BORDER-BOTTOM-WIDTH: 2px;
BACKGROUND: url (file:img/1px.jpeg) repeat-x 50% top;
}
 
#outerWrapper {}
WIDTH: 100%;
MARGIN-BOTTOM: 10px;
LINE-HEIGHT: 16px;
PADDING-BOTTOM: 0px;
BACKGROUND: url(img/1px.jpg) #FFF repeat 50% top;
}
 
#navWrapper {}
WIDTH: 200px;
position: relative;
float:left;
border-left: 0px;
margin-left: 0px;
padding-left: 0px;
text-align: left;
z-index: 40;
}
 
#contentWrapper {}
position: relative;
float: right;
WIDTH: 560px;
MARGIN-BOTTOM: 10px;
LINE-HEIGHT: 16px;
margin-left: 10px;
display: block;
PADDING-TOP: 10px;
PADDING-BOTTOM: 10px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 5px;
PADDING-TOP: 10px;
z-index: 50;
}
 
#footer {}
display: block;
position:relative;
float:left;
clear: both;
text-align: center;
BACKGROUND: url(img/1px.jpg) #EEA repeat - and left top;
width:100%;
background-color: #EEE;
PADDING-BOTTOM: 10px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
PADDING-TOP: 10px;
z-index: 60;
}
  1. #container {}
  2. WIDTH: 800px;
  3. / ** [disabled] HEIGHT: auto; */
  4. / ** [disabled] text-align: center; */
  5. margin: 0 0 0 0;
  6. display: block;
  7. position: relative;
  8. }
  9.  
  10. #header {}
  11. WIDTH: 100%;
  12. HEIGHT: 125px;
  13. margin-left: auto;
  14. margin-right: auto;
  15. PADDING-BOTTOM: 10px;
  16. PADDING-LEFT: 0px;
  17. PADDING-TOP: 0px;
  18. PADDING-RIGHT: 0px;
  19. }
  20.  
  21. #headerWrapper {}
  22. WIDTH: 100%;
  23. margin-left: auto;
  24. margin-right: auto;
  25. PADDING-RIGHT: 0px;
  26. PADDING-TOP: 0px;
  27. PADDING-BOTTOM: 0px;
  28. PADDING-LEFT: 0px;
  29. BORDER-BOTTOM-WIDTH: 2px;
  30. BACKGROUND: url (file:img/1px.jpeg) repeat-x 50% top;
  31. }
  32.  
  33. #outerWrapper {}
  34. WIDTH: 100%;
  35. MARGIN-BOTTOM: 10px;
  36. LINE-HEIGHT: 16px;
  37. PADDING-BOTTOM: 0px;
  38. BACKGROUND: url(img/1px.jpg) #FFF repeat 50% top;
  39. }
  40.  
  41. #navWrapper {}
  42. WIDTH: 200px;
  43. position: relative;
  44. float:left;
  45. border-left: 0px;
  46. margin-left: 0px;
  47. padding-left: 0px;
  48. text-align: left;
  49. z-index: 40;
  50. }
  51.  
  52. #contentWrapper {}
  53. position: relative;
  54. float: right;
  55. WIDTH: 560px;
  56. MARGIN-BOTTOM: 10px;
  57. LINE-HEIGHT: 16px;
  58. margin-left: 10px;
  59. display: block;
  60. PADDING-TOP: 10px;
  61. PADDING-BOTTOM: 10px;
  62. PADDING-LEFT: 10px;
  63. PADDING-RIGHT: 5px;
  64. PADDING-TOP: 10px;
  65. z-index: 50;
  66. }
  67.  
  68. #footer {}
  69. display: block;
  70. position:relative;
  71. float:left;
  72. clear: both;
  73. text-align: center;
  74. BACKGROUND: url(img/1px.jpg) #EEA repeat - and left top;
  75. width:100%;
  76. background-color: #EEE;
  77. PADDING-BOTTOM: 10px;
  78. PADDING-LEFT: 10px;
  79. PADDING-RIGHT: 10px;
  80. PADDING-TOP: 10px;
  81. z-index: 60;
  82. }
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Could you also post your html so I can see how your page is structured? Also, which browser is having the issue - or is it all browsers?

Note: Please use the code tags in your post, helps readability.
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1244
  • Loc: Sydney

Post 3+ Months Ago

You could try setting up tables with 0 border to make it transparent.

More code to load but at least it won't move :P
  • MarPlo
  • Novice
  • Novice
  • MarPlo
  • Posts: 34

Post 3+ Months Ago

Hi,
To annulate the effect of flat of the DIVs, try add before footer this:

HTML Code: [ Select ]
<br style="clear:both;" />

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 20 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.