Simple HTML CSS question

  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 684
  • Loc: ATL-GA

Post 3+ Months Ago

Hi Guys,
Been away from coding for a while and the simple things seem to be hanging me up.

I want the wrapper here to continue behind all of its content but right now its only the header in FF on OSX. Heres the code.

HTML
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PH</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="lbg"></div>
<div id="rbg"></div>

  <!-- Begin Wrapper -->
  <div id="wrapper">
 
     <!-- Begin Header -->
     <div id="header">
        
            This is the Header        
             
         </div>
         <!-- End Header -->
        
         <!-- Begin Left Column -->
         <div id="lcol">
        
            Left Column
        
         </div>
         <!-- End Left Column -->
        
         <!-- Begin Content Column -->
         <div id="content">
                
        
         </div>
         <!-- End Content Column -->
        
         <!-- Begin Right Column -->
         <div id="rcol">
        
            Right Column
        
         </div>
         <!-- End Right Column -->
        
         <!-- Begin Footer -->
         <div id="clear">
                
              
       </div>
         <!-- End Footer -->
        
  </div>
  <!-- End Wrapper -->
           <!-- Begin Footer -->
         <div id="footer">
           
              This is the Footer        
              
       </div>
         <!-- End Footer -->
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>PH</title>
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. </head>
  8. <body>
  9. <div id="lbg"></div>
  10. <div id="rbg"></div>
  11.   <!-- Begin Wrapper -->
  12.   <div id="wrapper">
  13.  
  14.      <!-- Begin Header -->
  15.      <div id="header">
  16.         
  17.             This is the Header        
  18.              
  19.          </div>
  20.          <!-- End Header -->
  21.         
  22.          <!-- Begin Left Column -->
  23.          <div id="lcol">
  24.         
  25.             Left Column
  26.         
  27.          </div>
  28.          <!-- End Left Column -->
  29.         
  30.          <!-- Begin Content Column -->
  31.          <div id="content">
  32.                 
  33.         
  34.          </div>
  35.          <!-- End Content Column -->
  36.         
  37.          <!-- Begin Right Column -->
  38.          <div id="rcol">
  39.         
  40.             Right Column
  41.         
  42.          </div>
  43.          <!-- End Right Column -->
  44.         
  45.          <!-- Begin Footer -->
  46.          <div id="clear">
  47.                 
  48.               
  49.        </div>
  50.          <!-- End Footer -->
  51.         
  52.   </div>
  53.   <!-- End Wrapper -->
  54.            <!-- Begin Footer -->
  55.          <div id="footer">
  56.            
  57.               This is the Footer        
  58.               
  59.        </div>
  60.          <!-- End Footer -->
  61. </body>
  62. </html>



CSS
Code: [ Select ]
@charset "UTF-8";
/* CSS Document */

@import url("css/reset.css");

/* Structure */

* { padding: 0; margin: 0; }

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-repeat: repeat;
  background-position: left top;
}

html {
    background:url(images/lbg.png) #c96d2e repeat-x;
  width: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

#lbg {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100px;
    background:url(images/hbgl.png) no-repeat right top;
    z-index: -1;'
}

#rbg {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100px;
    background:url(images/hbgr.png) repeat-x;
    z-index: -1;'
}

#wrapper {
    margin: 0 auto;
    width: 976px;
    background:url(images/bbg.png) repeat-x;
}

#header {
    color: #333;
    width: 976px;
    float: left;
    height: 100px;
}

#lc {
    color: #333;
    height: 350px;
    width: 200px;
    float: left;
}

#content {
    float: left;
    color: #333;
    height: 350px;
    width: 456px;
    display: inline;
}

#rcol {
    color: #333;
    height: 350px;
    width: 200px;
    float: left;
}
#clear {
    clear: both;
}
#footer {
    width: 976px;
    clear: both;
    color: #333;
    margin:0 auto;
}
/* End Structure */
  1. @charset "UTF-8";
  2. /* CSS Document */
  3. @import url("css/reset.css");
  4. /* Structure */
  5. * { padding: 0; margin: 0; }
  6. html, body {
  7.   height: 100%;
  8.   margin: 0px;
  9.   padding: 0px;
  10.   background-repeat: repeat;
  11.   background-position: left top;
  12. }
  13. html {
  14.     background:url(images/lbg.png) #c96d2e repeat-x;
  15.   width: 100%;
  16. }
  17. body {
  18.     font-family: Arial, Helvetica, sans-serif;
  19.     font-size: 13px;
  20. }
  21. #lbg {
  22.     position: fixed;
  23.     top: 0;
  24.     left: 0;
  25.     width: 50%;
  26.     height: 100px;
  27.     background:url(images/hbgl.png) no-repeat right top;
  28.     z-index: -1;'
  29. }
  30. #rbg {
  31.     position: fixed;
  32.     top: 0;
  33.     right: 0;
  34.     width: 50%;
  35.     height: 100px;
  36.     background:url(images/hbgr.png) repeat-x;
  37.     z-index: -1;'
  38. }
  39. #wrapper {
  40.     margin: 0 auto;
  41.     width: 976px;
  42.     background:url(images/bbg.png) repeat-x;
  43. }
  44. #header {
  45.     color: #333;
  46.     width: 976px;
  47.     float: left;
  48.     height: 100px;
  49. }
  50. #lc {
  51.     color: #333;
  52.     height: 350px;
  53.     width: 200px;
  54.     float: left;
  55. }
  56. #content {
  57.     float: left;
  58.     color: #333;
  59.     height: 350px;
  60.     width: 456px;
  61.     display: inline;
  62. }
  63. #rcol {
  64.     color: #333;
  65.     height: 350px;
  66.     width: 200px;
  67.     float: left;
  68. }
  69. #clear {
  70.     clear: both;
  71. }
  72. #footer {
  73.     width: 976px;
  74.     clear: both;
  75.     color: #333;
  76.     margin:0 auto;
  77. }
  78. /* End Structure */


Any help is appreciated. Thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

Can you post a screenshot :D

In my experience you need to set a hight attribute.

CSS Code: [ Select ]
#footer {
    width: 976px;
    height: 2em; //
    clear: both;
    color: #333;
    margin:0 auto;
}
 
  1. #footer {
  2.     width: 976px;
  3.     height: 2em; //
  4.     clear: both;
  5.     color: #333;
  6.     margin:0 auto;
  7. }
  8.  
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

You probably need to clear your column floats. Usually the easiest way (there are others) to do that is to simply create an empty div directly after both columns that has a style of "clear:both;". Basically without that clear your wrapper loses its understanding of the "bottom" of the columns.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 54 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.