3 Replies Latest reply on Mar 5, 2010 2:07 PM by Nancy OShea

    Layout Problems

    Bonzai0822

      Hey,

       

      I was wonderting if someone can help me workout how to get the layout I want (without resulting to tables to make the layout)

       

      My current layout is:

       

      layout.jpg

      Here's the html code:

       

      <!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/main.css" rel="stylesheet" type="text/css" />
      <style type="text/css">
      <!--
      -->
      </style>
      </head>

      <body>
      <div id="container">
        <div id="header" align="center">
          <h1>HEADER</h1>
        </div>
        <div id="sidebar1">
          <h3>Sidebar1 Content</h3>
          <p>The background color on this div will only show for the length of the content. If you'd like a dividing </p>
        </div>
        <div id="mainContent">
          <h1> Main Content </h1>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
          <h2>H2 level heading </h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.lk;</p>
          <p><!-- end #mainContent -->
          </p>
        </div>
          <br class="clearfloat" />
      </div>
      <div id="footer" align="center">
          <h3>FOOTER</h3>
        </div>
      </body>
      </html>

      ------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------ -----------------------------

       

      and the CSS file being linked: "main.css"

       

      body  {
          font: 100% Verdana, Arial, Helvetica, sans-serif;
          margin: 0;
          padding: 0;
          text-align: center;
          color: #000000;
          background-color: #CFC2E7
          }
      #container {
          width: 1072px;
          text-align: left;
          margin-top: 0;
          margin-right: auto;
          margin-bottom: 0;
          margin-left: auto;
          padding: 0px;
      }

      #header h1 {
          margin: 0;
          padding: 10px 0;
          color: #000;
          background-color: #CCC;
      }
      #sidebar1 {
          float: left;
          width: 175px;
          padding-top: 15px;
          padding-right: 10px;
          padding-bottom: 15px;
          padding-left: 20px;
          border: thick groove #000;
          background-image: url(../images/background.jpg);
          margin-top: 20px;
          margin-right: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
          height: 200px;
      }
      #mainContent {
          background-image: url(../images/background.jpg);
          border: thick ridge #000;
          margin-right: 0;
          margin-bottom: 0;
          margin-left: 250px;
          padding-top: 0;
          padding-right: 20px;
          padding-bottom: 0;
          padding-left: 20px;
          margin-top: 20px;
      }
      #footer {
          padding: 0;
      }
      #footer p {
          margin: 0;
          padding: 10px 0;
      }
      .fltrt {
          float: right;
          margin-left: 8px;
      }
      .fltlft {
          float: left;
          margin-right: 8px;
      }
      .clearfloat {
          clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
      }
      #MenuBar {
          font-weight: bold;
          color: #000;
          list-style-type: none;
          text-align: left;
      }

       

       

      ------------------------------------------------------------------------------------------ ---------------------------------------------

       

      Don't worry, that's not actually a design for a website I just did something basic as an example.

       

      Now to my problem. What I want to achieve is a 2nd, maybe a 3rd "side content" box underneath "side content1", When I try to add a 2nd one, it puts it just to the right of it.

       

      I've tried a couple of diffent things, but nothing I do seems to work... or only works until the layout on a different screen resolution, then it goes out of place.

       

      Any help/advice would be appreciated.

       

      Regards,

      Bonzai.