2 Replies Latest reply on Jun 27, 2010 10:39 AM by Nancy OShea

    CSS Div Layout- Please Help!

    violetteVLV

      Hi guys,

        I've been working on a new layout for my website today and I'm going absolutely crazy. I want the sidebar on this layout to stretch the left side of the entire page, and have a repeating y background image. On the right side would be a header, main content area, and a footer. Similar to my old website layout:

      http://www.vivalaviolette.com

       

      I've started over like 5 times and nothing is working. This is the code I have:

       

      @charset "utf-8";
      /* CSS Document */

       

      body {
          background: url(../_images/3dots.gif);
          text-align: center;
          margin: 0px;
          padding: 0px;
      }
      #wrapper {
          text-align: left;
          margin: auto;
          padding: 0px;
          width: 1000px;
      }
      #header {
          margin: 0px;
          padding: 0px;
          height: 100px;
          width: 900px;
          float: right;
      }
      #mainContent {
          margin: 0px;
          padding: 0px;
          height: 300px;
          background: #FFF;
          width: 900px;
          float: right;
      }

       

      #sidebar {
          margin: 0px;
          padding: 0px;
          width: 100px;
          float: left;
          background: url(../_images/side-flowers.gif) repeat-y;
      }
      #footer {
          margin: 0px;
          padding: 0px;
          height: 100px;
          width: 900px;
          float: right;
      }

       

       

       

      and then this:

       

      <!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>Untitled Document</title>
      <link href="_css/mainVLV.css" rel="stylesheet" type="text/css" />
      </head>

       

      <body>
      <div id="wrapper">
        <div id="header">Content for  id "header" Goes Here</div>
        <div id="mainContent">Content for  id "mainContent" Goes Here</div>
        <div id="sidebar">Content for  id "sidebar" Goes Here</div>
        <div id="footer">Content for  id "footer" Goes Here</div>
      </div>
      </body>
      </html>

       

       

       

       

       

      I tried adding height 100% to the body area, and then adding it to the sidebar. This only made the image stretch about 80% of the page and then just stopped.

       

      Any help would be GREATLY appreciated. Thanks!! =)

       

       

       

      -Violet