Back To Website Design Forum

CSS Footer positioning with two absolute positioned DIVs

  • JohnH
  • Born
  • Born
  • No Avatar
  • Joined: Dec 28, 2011
  • Posts: 2
  • Loc: Minnesota
  • Status: Offline

Post December 29th, 2011, 8:15 pm

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

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

Post December 29th, 2011, 8:15 pm

Page 1 of 1

Post Information

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

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.