Back To Website Design Forum

Simple HTML CSS question

  • CXLink
  • Expert
  • Expert
  • User avatar
  • Joined: Nov 22, 2004
  • Posts: 684
  • Loc: ATL-GA
  • Status: Offline

Post November 19th, 2010, 11:50 am

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>
  9. <body>
  10. <div id="lbg"></div>
  11. <div id="rbg"></div>
  13.   <!-- Begin Wrapper -->
  14.   <div id="wrapper">
  15.  
  16.      <!-- Begin Header -->
  17.      <div id="header">
  18.         
  19.             This is the Header        
  20.              
  21.          </div>
  22.          <!-- End Header -->
  23.         
  24.          <!-- Begin Left Column -->
  25.          <div id="lcol">
  26.         
  27.             Left Column
  28.         
  29.          </div>
  30.          <!-- End Left Column -->
  31.         
  32.          <!-- Begin Content Column -->
  33.          <div id="content">
  34.                 
  35.         
  36.          </div>
  37.          <!-- End Content Column -->
  38.         
  39.          <!-- Begin Right Column -->
  40.          <div id="rcol">
  41.         
  42.             Right Column
  43.         
  44.          </div>
  45.          <!-- End Right Column -->
  46.         
  47.          <!-- Begin Footer -->
  48.          <div id="clear">
  49.                 
  50.               
  51.        </div>
  52.          <!-- End Footer -->
  53.         
  54.   </div>
  55.   <!-- End Wrapper -->
  56.            <!-- Begin Footer -->
  57.          <div id="footer">
  58.            
  59.               This is the Footer        
  60.               
  61.        </div>
  62.          <!-- End Footer -->
  63. </body>
  64. </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 */
  4. @import url("css/reset.css");
  6. /* Structure */
  8. * { padding: 0; margin: 0; }
  10. html, body {
  11.   height: 100%;
  12.   margin: 0px;
  13.   padding: 0px;
  14.   background-repeat: repeat;
  15.   background-position: left top;
  16. }
  18. html {
  19.     background:url(images/lbg.png) #c96d2e repeat-x;
  20.   width: 100%;
  21. }
  23. body {
  24.     font-family: Arial, Helvetica, sans-serif;
  25.     font-size: 13px;
  26. }
  28. #lbg {
  29.     position: fixed;
  30.     top: 0;
  31.     left: 0;
  32.     width: 50%;
  33.     height: 100px;
  34.     background:url(images/hbgl.png) no-repeat right top;
  35.     z-index: -1;'
  36. }
  38. #rbg {
  39.     position: fixed;
  40.     top: 0;
  41.     right: 0;
  42.     width: 50%;
  43.     height: 100px;
  44.     background:url(images/hbgr.png) repeat-x;
  45.     z-index: -1;'
  46. }
  48. #wrapper {
  49.     margin: 0 auto;
  50.     width: 976px;
  51.     background:url(images/bbg.png) repeat-x;
  52. }
  54. #header {
  55.     color: #333;
  56.     width: 976px;
  57.     float: left;
  58.     height: 100px;
  59. }
  61. #lc {
  62.     color: #333;
  63.     height: 350px;
  64.     width: 200px;
  65.     float: left;
  66. }
  68. #content {
  69.     float: left;
  70.     color: #333;
  71.     height: 350px;
  72.     width: 456px;
  73.     display: inline;
  74. }
  76. #rcol {
  77.     color: #333;
  78.     height: 350px;
  79.     width: 200px;
  80.     float: left;
  81. }
  82. #clear {
  83.     clear: both;
  84. }
  85. #footer {
  86.     width: 976px;
  87.     clear: both;
  88.     color: #333;
  89.     margin:0 auto;
  90. }
  91. /* End Structure */


Any help is appreciated. Thanks!
Push-Here ::: Web Design + Identity
WordPress - like mayonnaise - goes great with anything
We adore chaos because we love to produce order. -M. C. Escher
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 19th, 2010, 11:50 am

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Joined: May 22, 2004
  • Posts: 3415
  • Loc: Richland, WA
  • Status: Offline

Post November 19th, 2010, 12:14 pm

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.  
#define NULL (::rand() % 2)
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post November 22nd, 2010, 9:36 pm

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.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com

Page 1 of 1

Post Information

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