Problems with DIVs!

  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Posts: 371
  • Loc: Riverside, CA

Post 3+ Months Ago

Okay, I have only recently started breaking back into HTML, and apparently tables aren't okay anymore.. :evil: So I am trying to do my website in DIV/CSS only.. I hate it! I could do what I need no problem in a table, but with CSS I'm LOST! Here is my website:

http://qchub.com/testing/

The green bordered area should have padding all around it, NOT how it is now with the right pushed all the way right. What am I doing wrong?

Code: [ Select ]
<HTML>
<HEAD>
    <LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="templates/default/css/global.css">
</HEAD>
<BODY>

    <DIV CLASS="CONTAINER">
        <DIV CLASS="BANNER">
            <H1 CLASS="PAGE_TITLE">QC HUB</H1>
        </DIV>
        <DIV CLASS="TOP_NAVIGATION_BAR">
                [NAVI_BAR]
        </DIV>
        <DIV CLASS="BODY_CONTAINER">
            <DIV CLASS="BODY_TABLE">
                <DIV CLASS="BODY_NAVIGATION">
                There are links!
                </DIV>

                <DIV CLASS="BODY_CONTENT">
                                <DIV CLASS="content_window">[CONTENT]</DIV>
                </DIV>
            </DIV>
        </DIV>
        <DIV CLASS="FOOTER">
            [FOOTER]
        </DIV>
    </DIV>

</BODY>
</HTML>
  1. <HTML>
  2. <HEAD>
  3.     <LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="templates/default/css/global.css">
  4. </HEAD>
  5. <BODY>
  6.     <DIV CLASS="CONTAINER">
  7.         <DIV CLASS="BANNER">
  8.             <H1 CLASS="PAGE_TITLE">QC HUB</H1>
  9.         </DIV>
  10.         <DIV CLASS="TOP_NAVIGATION_BAR">
  11.                 [NAVI_BAR]
  12.         </DIV>
  13.         <DIV CLASS="BODY_CONTAINER">
  14.             <DIV CLASS="BODY_TABLE">
  15.                 <DIV CLASS="BODY_NAVIGATION">
  16.                 There are links!
  17.                 </DIV>
  18.                 <DIV CLASS="BODY_CONTENT">
  19.                                 <DIV CLASS="content_window">[CONTENT]</DIV>
  20.                 </DIV>
  21.             </DIV>
  22.         </DIV>
  23.         <DIV CLASS="FOOTER">
  24.             [FOOTER]
  25.         </DIV>
  26.     </DIV>
  27. </BODY>
  28. </HTML>


Code: [ Select ]
HTML, BODY {
    background: url('../images/background.gif');
    margin: 0px;
}

.CONTAINER {
    display: block;
    width: 80%;
    height 100%;
    margin: 0 auto;

}

.BANNER {
    position: relative;
    display: block;
    border: 1px solid black;
    width: 100%;
    background: snow;

}

.TOP_NAVIGATION_BAR {
    position: relative;
    display: block;
    background: blue;
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;

}

.BODY_CONTAINER {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-collapse: collapse;

}


.BODY_TABLE {
    overflow: hidden;
}


.BODY_NAVIGATION {
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background: pink;
    overflow: hidden;
    border-right: 1px solid black;
}

.BODY_CONTENT {
    position: relative;
    left: 200;
    top: 0px
    overflow: hidden;
    padding: 10px;
    background: red;
    width: auto;
}

.FOOTER {
    position: relative;
    display: inline-block;
    background: blue;
    border-top: 0px;
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;
    
}

.content_window {
    border: 1px solid green;
    margin: 5px;

}
  1. HTML, BODY {
  2.     background: url('../images/background.gif');
  3.     margin: 0px;
  4. }
  5. .CONTAINER {
  6.     display: block;
  7.     width: 80%;
  8.     height 100%;
  9.     margin: 0 auto;
  10. }
  11. .BANNER {
  12.     position: relative;
  13.     display: block;
  14.     border: 1px solid black;
  15.     width: 100%;
  16.     background: snow;
  17. }
  18. .TOP_NAVIGATION_BAR {
  19.     position: relative;
  20.     display: block;
  21.     background: blue;
  22.     border: 1px solid black;
  23.     border-collapse: collapse;
  24.     width: 100%;
  25. }
  26. .BODY_CONTAINER {
  27.     position: relative;
  28.     width: 100%;
  29.     overflow: hidden;
  30.     border-left: 1px solid black;
  31.     border-right: 1px solid black;
  32.     border-collapse: collapse;
  33. }
  34. .BODY_TABLE {
  35.     overflow: hidden;
  36. }
  37. .BODY_NAVIGATION {
  38.     float: left;
  39.     position: absolute;
  40.     left: 0;
  41.     top: 0;
  42.     width: 200px;
  43.     height: 100%;
  44.     background: pink;
  45.     overflow: hidden;
  46.     border-right: 1px solid black;
  47. }
  48. .BODY_CONTENT {
  49.     position: relative;
  50.     left: 200;
  51.     top: 0px
  52.     overflow: hidden;
  53.     padding: 10px;
  54.     background: red;
  55.     width: auto;
  56. }
  57. .FOOTER {
  58.     position: relative;
  59.     display: inline-block;
  60.     background: blue;
  61.     border-top: 0px;
  62.     border: 1px solid black;
  63.     border-collapse: collapse;
  64.     width: 100%;
  65.     
  66. }
  67. .content_window {
  68.     border: 1px solid green;
  69.     margin: 5px;
  70. }
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1244
  • Loc: Sydney

Post 3+ Months Ago

Well, you wrote this

Code: [ Select ]
.content_window {
  border: 1px solid green;
  margin: 5px;
}
  1. .content_window {
  2.   border: 1px solid green;
  3.   margin: 5px;
  4. }


here is an example of some CSS padding
Code: [ Select ]
<!DOCTYPE html>
<html>
<head>
<style>
p
{
background-color:yellow;
}
p.padding
{
padding:25px 50px;
}
</style>
</head>

<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>

</html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p
  6. {
  7. background-color:yellow;
  8. }
  9. p.padding
  10. {
  11. padding:25px 50px;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <p>This is a paragraph with no specified padding.</p>
  17. <p class="padding">This is a paragraph with specified paddings.</p>
  18. </body>
  19. </html>


something you were looking for?

Also ever looked into a photoshop design?
  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Posts: 371
  • Loc: Riverside, CA

Post 3+ Months Ago

Thankyou for the reply.

I tried as you suggested but it did not help. My problem is that the contents inside the DIV/P tag still show with no padding on the right side. The border pushes all the way up to the border of the container.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Your issue is the use of width 100% and overflow: hidden;

this will show you your issues
HTML Code: [ Select ]
<HTML>
<HEAD>
   <style>
   HTML, BODY {
   background: url('../images/background.gif');
   margin: 0px;
}
 
.CONTAINER {
   display: block;
   width: 80%;
   height 100%;
   margin: 0 auto;
 
}
 
.BANNER {
   position: relative;
   display: block;
   border: 1px solid black;
   width: 100%;
   background: snow;
 
}
 
.TOP_NAVIGATION_BAR {
   position: relative;
   display: block;
   background: blue;
   border: 1px solid black;
   border-collapse: collapse;
   width: 100%;
 
}
 
.BODY_CONTAINER {
   position: relative;
   width: 100%;
   /*overflow: hidden;*/
   border-left: 1px solid black;
   border-right: 1px solid black;
   border-collapse: collapse;
 
}
 
 
.BODY_TABLE {
   /*overflow: hidden;*/
}
 
 
.BODY_NAVIGATION {
   float: left;
   position: absolute;
   left: 0;
   top: 0;
   width: 200px;
   height: 100%;
   background: pink;
   overflow: hidden;
   border-right: 1px solid black;
}
 
.BODY_CONTENT {
   position: relative;
   left: 200;
   top: 0px
   overflow: hidden;
   padding: 10px;
   background: red;
}
 
.FOOTER {
   position: relative;
   display: inline-block;
   background: blue;
   border-top: 0px;
   border: 1px solid black;
   border-collapse: collapse;
   width: 100%;
   
}
 
.content_window {
   border: 1px solid green;
   margin: 5px;
 
}
 
   </style>
</HEAD>
<BODY>
 
   <DIV CLASS="CONTAINER">
      <DIV CLASS="BANNER">
         <H1 CLASS="PAGE_TITLE">QC HUB</H1>
      </DIV>
      <DIV CLASS="TOP_NAVIGATION_BAR">
            [NAVI_BAR]
      </DIV>
      <DIV CLASS="BODY_CONTAINER">
         <DIV CLASS="BODY_TABLE">
            <DIV CLASS="BODY_NAVIGATION">
            There are links!
            </DIV>
 
            <DIV CLASS="BODY_CONTENT">
                        <DIV CLASS="content_window">[CONTENT]</DIV>
            </DIV>
         </DIV>
      </DIV>
      <DIV CLASS="FOOTER">
         [FOOTER]
      </DIV>
   </DIV>
 
</BODY>
</HTML>
 
  1. <HTML>
  2. <HEAD>
  3.    <style>
  4.    HTML, BODY {
  5.    background: url('../images/background.gif');
  6.    margin: 0px;
  7. }
  8.  
  9. .CONTAINER {
  10.    display: block;
  11.    width: 80%;
  12.    height 100%;
  13.    margin: 0 auto;
  14.  
  15. }
  16.  
  17. .BANNER {
  18.    position: relative;
  19.    display: block;
  20.    border: 1px solid black;
  21.    width: 100%;
  22.    background: snow;
  23.  
  24. }
  25.  
  26. .TOP_NAVIGATION_BAR {
  27.    position: relative;
  28.    display: block;
  29.    background: blue;
  30.    border: 1px solid black;
  31.    border-collapse: collapse;
  32.    width: 100%;
  33.  
  34. }
  35.  
  36. .BODY_CONTAINER {
  37.    position: relative;
  38.    width: 100%;
  39.    /*overflow: hidden;*/
  40.    border-left: 1px solid black;
  41.    border-right: 1px solid black;
  42.    border-collapse: collapse;
  43.  
  44. }
  45.  
  46.  
  47. .BODY_TABLE {
  48.    /*overflow: hidden;*/
  49. }
  50.  
  51.  
  52. .BODY_NAVIGATION {
  53.    float: left;
  54.    position: absolute;
  55.    left: 0;
  56.    top: 0;
  57.    width: 200px;
  58.    height: 100%;
  59.    background: pink;
  60.    overflow: hidden;
  61.    border-right: 1px solid black;
  62. }
  63.  
  64. .BODY_CONTENT {
  65.    position: relative;
  66.    left: 200;
  67.    top: 0px
  68.    overflow: hidden;
  69.    padding: 10px;
  70.    background: red;
  71. }
  72.  
  73. .FOOTER {
  74.    position: relative;
  75.    display: inline-block;
  76.    background: blue;
  77.    border-top: 0px;
  78.    border: 1px solid black;
  79.    border-collapse: collapse;
  80.    width: 100%;
  81.    
  82. }
  83.  
  84. .content_window {
  85.    border: 1px solid green;
  86.    margin: 5px;
  87.  
  88. }
  89.  
  90.    </style>
  91. </HEAD>
  92. <BODY>
  93.  
  94.    <DIV CLASS="CONTAINER">
  95.       <DIV CLASS="BANNER">
  96.          <H1 CLASS="PAGE_TITLE">QC HUB</H1>
  97.       </DIV>
  98.       <DIV CLASS="TOP_NAVIGATION_BAR">
  99.             [NAVI_BAR]
  100.       </DIV>
  101.       <DIV CLASS="BODY_CONTAINER">
  102.          <DIV CLASS="BODY_TABLE">
  103.             <DIV CLASS="BODY_NAVIGATION">
  104.             There are links!
  105.             </DIV>
  106.  
  107.             <DIV CLASS="BODY_CONTENT">
  108.                         <DIV CLASS="content_window">[CONTENT]</DIV>
  109.             </DIV>
  110.          </DIV>
  111.       </DIV>
  112.       <DIV CLASS="FOOTER">
  113.          [FOOTER]
  114.       </DIV>
  115.    </DIV>
  116.  
  117. </BODY>
  118. </HTML>
  119.  


I was also seeing some malformed CSS in your code

here is an example of what your trying to do that I wrote really quick this is the basic design I believe your looking for this work in firefox 19 and IE 9
HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Template</title>
 
<!-- CSS -->
<style type="text/css">
 
/* General CSS */
html, body {
   width: 100%;
   height: 100%;
   margin: 0px;
}
 
 
/* Containers */
div.page-container {
   width: 80%;
   height: 100%;
   margin: 0 auto;
   background-color:#CCCCCC;
}
 
div.banner-container {
   background-color:#FFFFFF;
}
 
div.navigation-container {
   background-color:#00FFFF;
}
 
div.body-container {
   height:auto;
   background-color:#FF0000;
}
 
div.table-container {
   height:100%;
}
 
div.footer-container {
   background-color:#00FF00;
}
 
 
/* Elements */
div.banner-container h1 {
   color:#0066FF;
}
 
div.body-navigation {
   background-color:#FF99FF;
   width:15%;
   float:left;
}
 
div.body-content {
   background-color:#0000FF;
   height: 100%;
   width: 85%;
   float:left;
}
 
div.content-window {
   border: 1px solid green;
   margin: 15px;
}
 
/* Clears */
div.clear-both {
   clear:both;
}
 
div.clear-right {
   clear:right;
}
 
div.clear-left {
   clear:left;
}
 
 
/* Borders */
.border-all {
   border: 1px solid #000000;
}
 
.border-top {
   border-top: 1px solid #000000;
}
 
.border-right {
   border-right: 1px solid #000000;
}
 
.border-bottom {
   border-bottom: 1px solid #000000;
}
 
.border-left {
   border-left: 1px solid #000000;
}
 
.border-left-right {
   border-left: 1px solid #000000;
   border-right: 1px solid #000000;
}
 
.border-top-bottom {
   border-top: 1px solid #000000;
   border-bottom: 1px solid #000000;
}
 
</style>
 
</head>
 
<body>
 
<!-- Page Wrapper -->
<div class="page-container">
   
    <!-- Banner Wrapper -->
    <div class="banner-container border-all">
        <h1>Banner</h1>
    </div>
   
    <!-- Navigation Wrapper -->
    <div class="navigation-container border-left-right">
      Top Navigation
    </div>
   
    <!-- Body Container -->
    <div class="body-container">
     
        <!-- Table Container -->
        <div class="table-container">
       
            <!-- Body Navigation -->
            <div class="body-navigation">
                There are links!
            </div>
           
            <!-- Body Content -->
            <div class="body-content">
                <div class="content-window">
                    Content
                </div>
            </div>
           
        </div>
       
        <!-- Clear Floats -->
        <div class="clear-both"></div>
       
        <!-- Footer Container -->
        <div class="footer-container">
         Footer
        </div>
       
    </div>
 
</div>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>New Template</title>
  6.  
  7. <!-- CSS -->
  8. <style type="text/css">
  9.  
  10. /* General CSS */
  11. html, body {
  12.    width: 100%;
  13.    height: 100%;
  14.    margin: 0px;
  15. }
  16.  
  17.  
  18. /* Containers */
  19. div.page-container {
  20.    width: 80%;
  21.    height: 100%;
  22.    margin: 0 auto;
  23.    background-color:#CCCCCC;
  24. }
  25.  
  26. div.banner-container {
  27.    background-color:#FFFFFF;
  28. }
  29.  
  30. div.navigation-container {
  31.    background-color:#00FFFF;
  32. }
  33.  
  34. div.body-container {
  35.    height:auto;
  36.    background-color:#FF0000;
  37. }
  38.  
  39. div.table-container {
  40.    height:100%;
  41. }
  42.  
  43. div.footer-container {
  44.    background-color:#00FF00;
  45. }
  46.  
  47.  
  48. /* Elements */
  49. div.banner-container h1 {
  50.    color:#0066FF;
  51. }
  52.  
  53. div.body-navigation {
  54.    background-color:#FF99FF;
  55.    width:15%;
  56.    float:left;
  57. }
  58.  
  59. div.body-content {
  60.    background-color:#0000FF;
  61.    height: 100%;
  62.    width: 85%;
  63.    float:left;
  64. }
  65.  
  66. div.content-window {
  67.    border: 1px solid green;
  68.    margin: 15px;
  69. }
  70.  
  71. /* Clears */
  72. div.clear-both {
  73.    clear:both;
  74. }
  75.  
  76. div.clear-right {
  77.    clear:right;
  78. }
  79.  
  80. div.clear-left {
  81.    clear:left;
  82. }
  83.  
  84.  
  85. /* Borders */
  86. .border-all {
  87.    border: 1px solid #000000;
  88. }
  89.  
  90. .border-top {
  91.    border-top: 1px solid #000000;
  92. }
  93.  
  94. .border-right {
  95.    border-right: 1px solid #000000;
  96. }
  97.  
  98. .border-bottom {
  99.    border-bottom: 1px solid #000000;
  100. }
  101.  
  102. .border-left {
  103.    border-left: 1px solid #000000;
  104. }
  105.  
  106. .border-left-right {
  107.    border-left: 1px solid #000000;
  108.    border-right: 1px solid #000000;
  109. }
  110.  
  111. .border-top-bottom {
  112.    border-top: 1px solid #000000;
  113.    border-bottom: 1px solid #000000;
  114. }
  115.  
  116. </style>
  117.  
  118. </head>
  119.  
  120. <body>
  121.  
  122. <!-- Page Wrapper -->
  123. <div class="page-container">
  124.    
  125.     <!-- Banner Wrapper -->
  126.     <div class="banner-container border-all">
  127.         <h1>Banner</h1>
  128.     </div>
  129.    
  130.     <!-- Navigation Wrapper -->
  131.     <div class="navigation-container border-left-right">
  132.       Top Navigation
  133.     </div>
  134.    
  135.     <!-- Body Container -->
  136.     <div class="body-container">
  137.      
  138.         <!-- Table Container -->
  139.         <div class="table-container">
  140.        
  141.             <!-- Body Navigation -->
  142.             <div class="body-navigation">
  143.                 There are links!
  144.             </div>
  145.            
  146.             <!-- Body Content -->
  147.             <div class="body-content">
  148.                 <div class="content-window">
  149.                     Content
  150.                 </div>
  151.             </div>
  152.            
  153.         </div>
  154.        
  155.         <!-- Clear Floats -->
  156.         <div class="clear-both"></div>
  157.        
  158.         <!-- Footer Container -->
  159.         <div class="footer-container">
  160.          Footer
  161.         </div>
  162.        
  163.     </div>
  164.  
  165. </div>
  166. </body>
  167. </html>
  168.  
  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Posts: 371
  • Loc: Riverside, CA

Post 3+ Months Ago

Scott, thankyou. After viewing your code, I was able to fix my issues (and other problems lol). My layout is starting to look good (http://qchub.com). Very much appreciate the help.

Issue Resolved / A MOD can remove this now.
Moderator Remark: We don't remove threads just because the problem is solved. This thread could potentially help someone else in the future.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: yasar123 and 92 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.