WordPress.org

1. sugarbleach
   Member
   Posted 3 years ago #

   Okay, My div layers are working properly but when I want to position a div inside another div, its not working or moving at all. Can anyone tell me where my coding went wrong? Thanks!

   /* --------------- Div ID's --------------- */
   
   /* ----- HEADER ----- */
   
   #header {
   width:741px;
   height:224px;
   background-image:url();
   border:solid 0px #000;
   }
   
   /* FAUX LAYOUT WRAPPER */
   
   #wrapper{
   width:741px;
   background:url();
   overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
   margin-top:0px;
   position: relative;
   }
   
   /* ----- NAVIGATION ----- */
   
   #sidebar {
   width:180px;
   min-height:500px; /* for modern browsers */
   height:auto !important; /* for modern browsers */
   height:500px; /* for IE5.x and IE6 */
   background:transparent;
   border:solid 1px #000;
   float:right;
   }
   
   /* ----- MAIN CONTENT ----- */
   
   #main {
   width:460px;
   min-height:500px; /* for modern browsers */
   height:auto !important; /* for modern browsers */
   height:500px; /* for IE5.x and IE6 */
   background:transparent;
   border:solid 1px #000;
   margin-top:0px;
   position: absolute;
   top:0;
   right:30;
   }
   
   /* ----- FOOTER ----- */
   
   #footer {
   width:741px;
   height:325px;
   background-image:url();
   margin-top:0px;
   border:solid 0px #000;
   }

2. techmulla
   Member
   Posted 3 years ago #

   place your #main before #sidebar :)

3. sugarbleach
   Member
   Posted 3 years ago #

   Ohh goodie! Fixed myself by just messing around, apparantly, where it says, position: absolute in the #main it should say position: relative (basically, replace absolute with relative). For the sidebar, KEPT float right and added the same code except used right instead of left so I got the coding below: (I have no idea if this is valid since most sites I went looking how to do this, just had position: absolute.)

   *EDIT* LOOKS VALID! My site just passed validation so it looks like it works perfectily fine! Don't know the effects on other browsers though, except for IE7 which came out just like in Firefox.

   /* --------------- Div ID's --------------- */
   
   /* ----- HEADER ----- */
   
   #header {
   width:741px;
   height:224px;
   background-image:url("");
   border:solid 0px #000;
   }
   
   /* FAUX LAYOUT WRAPPER */
   
   #wrapper{
   width:741px;
   background:url("") repeat-y;
   overflow:auto;
   margin-top:0px;
   position: relative;
   }
   
   /* ----- NAVIGATION ----- */
   
   #sidebar {
   width:182px;
   min-height:500px; /* for modern browsers */
   height:auto !important; /* for modern browsers */
   height:500px; /* for IE5.x and IE6 */
   background:transparent;
   border:solid 0px #000;
   float: right;
   position:relative;
             right:92px;
             top:0px;
   }
   
   /* ----- MAIN CONTENT ----- */
   
   #main {
   width:362px;
   min-height:500px; /* for modern browsers */
   height:auto !important; /* for modern browsers */
   height:500px; /* for IE5.x and IE6 */
   background:transparent;
   border:solid 0px #000;
   
   margin-top:0px;
   position:relative;
             left:72px;
             top:0px;
   }
   
   /* ----- FOOTER ----- */
   
   #footer {
   width:741px;
   height:325px;
   background-image:url("");
   margin-top:0px;
   border:solid 0px #000;
   }

   I took off the border since I don't need them anymore now that they I know where my divs are. Its good to add a border when doing this so you can see your div boxes (unless they have backgrounds).

4. sugarbleach
   Member
   Posted 3 years ago #

   I tried what techmulla said but my divs disappeared off the page! The footer and header just met up with each other like my wrapper div never existed.

Topic Closed

This topic has been closed to new replies.