<div> Mess!

  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 130

Post 3+ Months Ago

I have no idea what to do here. I've tried various things. When the page is the correct size, then everything is perfect, exactly as I wanted this to be. I started this to practice my ability to position div's. I'm able to get everything where I want it, but once the page is resized, it all falls apart. Need to know how to make it scroll instead of fall apart. And I've tried most of the things that people have said will make it scroll. None have worked. So I assume there is a flaw in my code that prevents this.

Code: [ Select ]
<!DOCTYPE html>
<html>

<head>

<link rel="icon"
   type="image/png"
   href="bob.jpg">
<style>

#wrapper
{
min-width:100%;
}

#outline_border
{
position:absolute;
min-width:100%;
max-height:1000px;
}
#divfoot
{
border-top-style:ridge;
border-color:#181818;
min-width:100%;
height:100px;
margin-top:800px;
background-color:#484848;
}

#divhead
{
border-bottom-style:ridge;
border-color:#181818;
margin-top:0;
min-width:100%;
height:100px;
background-color:#484848;
}

#main
{
min-width:75%;
height:800px;
background-color:#58423A;
float:left;
}

#div1
{
outline-style:ridge;
outline-color:#FFABAA;
outline-width:5px;
width:200px;
height:200px;
margin:20px 10px 20px 20px;
float:left;
position:relative;
z-index:5;
}

#div2
{
outline-style:ridge;
outline-color:#FFABAA;
outline-width:5px;
width:200px;
height:200px;
margin:20px 20px 20px 10px;
float:left;
position:relative;
z-index:5;
}

#div3
{
outline-style:ridge;
outline-color:#FFABAA;
outline-width:5px;
width:200px;
height:200px;
margin:20px;
clear:left;
position:relative;
z-index:5;
}

#div4
{
outline-style:ridge;
outline-color:#FFABAA;
outline-width:5px;
width:200px;
height:200px;
margin:20px;
position:relative;
top:-220px;
left:220px;
z-index:5;
}

#box
{
max-width:460px;
max-height:460px;
background-image:url('coolness.jpg');
position:relative;
left:240px;
}

#leftside
{
min-width:12%;
height:800px;
float:left;
background-color:#686868;
}

#rightside
{
min-width:12%;
height:800px;
float:left;
background-color:#686868;
}

#strip1
{
background-color:#58423A;
height:14px;
width:460px;
position:absolute;
top:224px;
z-index:3;
}

#strip2
{
background-color:#58423A;
height:460px;
width:14px;
position:absolute;
left:225px;
z-index:3;
}

#window_sill
{
width:430px;
height:430px;
outline-style:solid;
outline-color:#58423A;
outline-width:15px;
position:relative;
left:-262px;
top:15px;
float:right;
z-index:8;
}

</style>
</head>

<body>
<div id="wrapper">
  <div id="outline_border">
    <div id="divhead">
    </div>
       <div id="leftside">
       </div>
   <div id="main">
      <div id="window_sill">
      </div>
        <div id="box">
        <div id="strip1">
        </div>
        <div id="strip2">
        </div>
           <div id="div1">
           </div>
            <div id="div2">
            </div>
               <div id="div3">
               </div>
                <div id="div4">
                </div>
        </div>
             
   </div>    
                 <div id="rightside">
                 </div>
                   <div id="divfoot">
                   </div>
  </div>
</div>
</body>
</html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="icon"
  5.    type="image/png"
  6.    href="bob.jpg">
  7. <style>
  8. #wrapper
  9. {
  10. min-width:100%;
  11. }
  12. #outline_border
  13. {
  14. position:absolute;
  15. min-width:100%;
  16. max-height:1000px;
  17. }
  18. #divfoot
  19. {
  20. border-top-style:ridge;
  21. border-color:#181818;
  22. min-width:100%;
  23. height:100px;
  24. margin-top:800px;
  25. background-color:#484848;
  26. }
  27. #divhead
  28. {
  29. border-bottom-style:ridge;
  30. border-color:#181818;
  31. margin-top:0;
  32. min-width:100%;
  33. height:100px;
  34. background-color:#484848;
  35. }
  36. #main
  37. {
  38. min-width:75%;
  39. height:800px;
  40. background-color:#58423A;
  41. float:left;
  42. }
  43. #div1
  44. {
  45. outline-style:ridge;
  46. outline-color:#FFABAA;
  47. outline-width:5px;
  48. width:200px;
  49. height:200px;
  50. margin:20px 10px 20px 20px;
  51. float:left;
  52. position:relative;
  53. z-index:5;
  54. }
  55. #div2
  56. {
  57. outline-style:ridge;
  58. outline-color:#FFABAA;
  59. outline-width:5px;
  60. width:200px;
  61. height:200px;
  62. margin:20px 20px 20px 10px;
  63. float:left;
  64. position:relative;
  65. z-index:5;
  66. }
  67. #div3
  68. {
  69. outline-style:ridge;
  70. outline-color:#FFABAA;
  71. outline-width:5px;
  72. width:200px;
  73. height:200px;
  74. margin:20px;
  75. clear:left;
  76. position:relative;
  77. z-index:5;
  78. }
  79. #div4
  80. {
  81. outline-style:ridge;
  82. outline-color:#FFABAA;
  83. outline-width:5px;
  84. width:200px;
  85. height:200px;
  86. margin:20px;
  87. position:relative;
  88. top:-220px;
  89. left:220px;
  90. z-index:5;
  91. }
  92. #box
  93. {
  94. max-width:460px;
  95. max-height:460px;
  96. background-image:url('coolness.jpg');
  97. position:relative;
  98. left:240px;
  99. }
  100. #leftside
  101. {
  102. min-width:12%;
  103. height:800px;
  104. float:left;
  105. background-color:#686868;
  106. }
  107. #rightside
  108. {
  109. min-width:12%;
  110. height:800px;
  111. float:left;
  112. background-color:#686868;
  113. }
  114. #strip1
  115. {
  116. background-color:#58423A;
  117. height:14px;
  118. width:460px;
  119. position:absolute;
  120. top:224px;
  121. z-index:3;
  122. }
  123. #strip2
  124. {
  125. background-color:#58423A;
  126. height:460px;
  127. width:14px;
  128. position:absolute;
  129. left:225px;
  130. z-index:3;
  131. }
  132. #window_sill
  133. {
  134. width:430px;
  135. height:430px;
  136. outline-style:solid;
  137. outline-color:#58423A;
  138. outline-width:15px;
  139. position:relative;
  140. left:-262px;
  141. top:15px;
  142. float:right;
  143. z-index:8;
  144. }
  145. </style>
  146. </head>
  147. <body>
  148. <div id="wrapper">
  149.   <div id="outline_border">
  150.     <div id="divhead">
  151.     </div>
  152.        <div id="leftside">
  153.        </div>
  154.    <div id="main">
  155.       <div id="window_sill">
  156.       </div>
  157.         <div id="box">
  158.         <div id="strip1">
  159.         </div>
  160.         <div id="strip2">
  161.         </div>
  162.            <div id="div1">
  163.            </div>
  164.             <div id="div2">
  165.             </div>
  166.                <div id="div3">
  167.                </div>
  168.                 <div id="div4">
  169.                 </div>
  170.         </div>
  171.              
  172.    </div>    
  173.                  <div id="rightside">
  174.                  </div>
  175.                    <div id="divfoot">
  176.                    </div>
  177.   </div>
  178. </div>
  179. </body>
  180. </html>
[/b][/b]
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 130

Post 3+ Months Ago

I finally found the problem. It's because the div id'd "outline_border" has position:absolute;

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 67 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
 
cron
 

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