CSS Footer positioning with two absolute positioned DIVs

  • JohnH
  • Born
  • Born
  • JohnH
  • Posts: 2
  • Loc: Minnesota

Post 3+ Months Ago

Hi all. I have a problem positioning my div tags. I have two divs which are aboslutely positioned which appear as boxes to a visitor. I want my footer to go right below these boxes but it shows up overlapping at the top of the boxes or at the top behind the boxes. Is there something I'm doing wrong? Here is the html:
HTML Code: [ Select ]
<html>
<head>
<title>The title of the website</title>
<LINK rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<center>
<br>
<br>
<span itemprop="name"><h1>Header1</h1></span>
<h4>Header4</h4></center>
[ Home ]
<div id="wrap">
<div id="content4">
<p>Content 4</p></div>
<div id="content3">
<p>Content 3</p>
</div>
<div id="footer">Here is the footer
</div>
</div>
</body>
</html>
 
  1. <html>
  2. <head>
  3. <title>The title of the website</title>
  4. <LINK rel="stylesheet" type="text/css" href="css/style.css">
  5. </head>
  6. <body>
  7. <center>
  8. <br>
  9. <br>
  10. <span itemprop="name"><h1>Header1</h1></span>
  11. <h4>Header4</h4></center>
  12. [ Home ]
  13. <div id="wrap">
  14. <div id="content4">
  15. <p>Content 4</p></div>
  16. <div id="content3">
  17. <p>Content 3</p>
  18. </div>
  19. <div id="footer">Here is the footer
  20. </div>
  21. </div>
  22. </body>
  23. </html>
  24.  


And here is the CSS
Code: [ Select ]
html {height:100%;}

body {
margin: 0;
background-image: url('../images/bg1.jpg');
background-repeat: repeat-x;
}
/* table menu */
#wrap {
margin:auto;
position:relative;
left:0 px;
background-color:red;
height:100%;
}
#inner-wrap {
padding-bottom:80px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
#tablemenu
{
background-color: 3B5998;
text-align: left;
width: 100%;
border-top: 1;
border-left:0;
border-style: solid;
border-color: black;
border-radius: 10;
font-family: tahoma;
color: white;
font-size: 12px;
}
img.tablelines
{
position:relative;
left: 29px;
}
#content1
{
background-color:white;
text-align: center;
position: absolute;
left: 0px;
width: 400px;
height: auto;
margin: 30px;
border-top:1;
border-right:1;
border-style:solid;
border-color:black;
font-size: 12px;
color: black;
}
#content2
{
background-color:white;
text-align: left;
position: absolute;
left: 430px;
width: 400px;
height: auto;
margin: 30px;
border-top:1;
border-right:1;
border-style:solid;
border-color:black;
font-size: 12px;
color: black;
}
#content3
{
background-color:white;
text-align: center;
position: absolute;
left: 860px;
width: 400px;
margin: 30px;
border-top:1;
border-right:1;
border-style:solid;
border-color:black;
font-size: 12px;
color: black;
}

#content4
{
background-color:white;
text-align: left;
position: absolute;
left: 0px;
width: 800px;
margin: 30px;
border-top:1;
border-right:1;
border-style:solid;
border-color:black;
font-size: 14px;
color: black;
}

#footer {
position: fixed;
bottom: 0px;
height:80px;
background-color: #333333;
width:100%;
color:#FF00FF;
text-align:center;
}
  1. html {height:100%;}
  2. body {
  3. margin: 0;
  4. background-image: url('../images/bg1.jpg');
  5. background-repeat: repeat-x;
  6. }
  7. /* table menu */
  8. #wrap {
  9. margin:auto;
  10. position:relative;
  11. left:0 px;
  12. background-color:red;
  13. height:100%;
  14. }
  15. #inner-wrap {
  16. padding-bottom:80px;
  17. }
  18. #inner-wrap:after {
  19. content:" ";
  20. display:block;
  21. clear:both;
  22. }
  23. #tablemenu
  24. {
  25. background-color: 3B5998;
  26. text-align: left;
  27. width: 100%;
  28. border-top: 1;
  29. border-left:0;
  30. border-style: solid;
  31. border-color: black;
  32. border-radius: 10;
  33. font-family: tahoma;
  34. color: white;
  35. font-size: 12px;
  36. }
  37. img.tablelines
  38. {
  39. position:relative;
  40. left: 29px;
  41. }
  42. #content1
  43. {
  44. background-color:white;
  45. text-align: center;
  46. position: absolute;
  47. left: 0px;
  48. width: 400px;
  49. height: auto;
  50. margin: 30px;
  51. border-top:1;
  52. border-right:1;
  53. border-style:solid;
  54. border-color:black;
  55. font-size: 12px;
  56. color: black;
  57. }
  58. #content2
  59. {
  60. background-color:white;
  61. text-align: left;
  62. position: absolute;
  63. left: 430px;
  64. width: 400px;
  65. height: auto;
  66. margin: 30px;
  67. border-top:1;
  68. border-right:1;
  69. border-style:solid;
  70. border-color:black;
  71. font-size: 12px;
  72. color: black;
  73. }
  74. #content3
  75. {
  76. background-color:white;
  77. text-align: center;
  78. position: absolute;
  79. left: 860px;
  80. width: 400px;
  81. margin: 30px;
  82. border-top:1;
  83. border-right:1;
  84. border-style:solid;
  85. border-color:black;
  86. font-size: 12px;
  87. color: black;
  88. }
  89. #content4
  90. {
  91. background-color:white;
  92. text-align: left;
  93. position: absolute;
  94. left: 0px;
  95. width: 800px;
  96. margin: 30px;
  97. border-top:1;
  98. border-right:1;
  99. border-style:solid;
  100. border-color:black;
  101. font-size: 14px;
  102. color: black;
  103. }
  104. #footer {
  105. position: fixed;
  106. bottom: 0px;
  107. height:80px;
  108. background-color: #333333;
  109. width:100%;
  110. color:#FF00FF;
  111. text-align:center;
  112. }

Any help would be greatly appreciated, Thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 39 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.