2 Replies Latest reply on Feb 10, 2010 5:43 PM by Nancy OShea

    Problems with floats

    olicorse Level 1

      Hi,

       

      I am trying to design a webpage that has a div called 'Wrapper_back' stretching across the whole monitor with a white background. I've done this and created another div inside it called 'Main', which is 800px wide and centrally aligned using auto margins for left and right and Relative positioning.

       

      Inside 'Main', I want to create a menu on the left and a box to contain text on the right, called 'Menu' and 'Main_text' respectively. However, when I make these divs float left and right, it causes 'Main' to collapse and the text from 'Menu' and 'Main_text' to overlap 'Wrapper_back' onto the body of the page.

       

      I've made 'Main' float left as well, which causes it to contain 'Menu' and 'Main_text' but the background of 'Wrapper_back' can no longer be seen. When I try the same trick with 'Wrapper_back' it causes it all to shift to the left.

       

      Can anyone tell me what to do in order to make 'Wrapper_back' or 'Main' fit the dimensions of 'Menu' and 'Main_text' without collapsing and so that the background remains white?

       

      It works in Dreamweaver (Pic 1), but when I preview it, it all falls apart! (Pic 2)

       

      Cheers

       

      Oli

       

      Here's the actual code:

       

      <title>angusapps.com</title>
      <style type="text/css">
      <!--
      body {
          margin: 0px;
          padding: 0px;
          background-color: #000;
          background-image: url(wallpaper.jpg);
      }
      p {
          margin: 0px;
          line-height: 1.5em;
          font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
          font-size: 15px;
          color: #333;
      }
      h1 {
          font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
          font-size: 22px;
          font-weight: bold;
          color: #999;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 10px;
          margin-left: 0px;
      }
      h2 {
          font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
          font-size: 15px;
          font-weight: bold;
          color: #666;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 10px;
          margin-left: 0px;
      }
      p a {
          text-decoration: none;
          color: #666;
      }
      p a:hover {
          text-decoration: none;
          color: #F00;
      }
      #wrapper {
          width: 800px;
          margin-right: auto;
          margin-left: auto;
          position: relative;
      }
      #wrapper_back {
          background-color: #FFF;
      }
      #top_frame {
          width: 800px;
          margin-right: auto;
          margin-left: auto;
          margin-top: 2%;
          text-align: right;
          padding-bottom: 5px;
      }
      #top_frame p  {
          color: #FFF;
      }
      #top_frame p a {
          color: #FFF;
      }
      #top_frame p a:hover {
          text-decoration: underline;
      }
      #banner {
          border-bottom-width: 1px;
          border-bottom-style: solid;
          border-bottom-color: #CCC;
          padding-top: 10px;
          padding-bottom: 5px;
      }
      #main {
          background-color: #FFF;
          padding-bottom: 15px;
          float: left;
      }
      #menu  {
          width: 150px;
          float: left;
      }
      #menu p {
          line-height: 2em;
      }
      #main_text {
          width: 630px;
          border-left-width: 1px;
          border-left-style: solid;
          border-left-color: #CCC;
          margin-top: 10px;
          padding-left: 10px;
          float: right;
          clear: right;
      }
      #footer {
          width: 800px;
          margin-right: auto;
          margin-left: auto;
          position: relative;
          text-align: center;
          margin-top: 10px;
      }
      #footer p {
          font-size: 13px;
          color: #CCC;
      }
      -->
      </style>
      </head>

       

      <body>   
      <div id="top_frame">
        <p><a href="/link.php">Home</a> | <a href="/link.php">Demos</a> | <a href="/link.php">Login</a></p>
      </div>
      <div id="wrapper_back">
        <div id="wrapper">
          <div id="banner"><img src="banner1.jpg" width="800" height="142" /></div>
          <div id="main">
            <div id="menu">
              <p><a href="/link.php">Mission Statement</a></p>
              <p><a href="/link.php">Services</a></p>
              <p><a href="/link.php">Portfolio</a></p>
              <p><a href="/link.php">Demos</a></p>
              <p><a href="/link.php">Clients</a></p>
              <p><a href="/link.php">Technical Details</a></p>
              <p><a href="/link.php">How it Works</a></p>
              <p><a href="/link.php">Contact</a></p></div>
            <div id="main_text">
              <h1>Mission Statement</h1>
              <h2>Data and Interaction</h2>
              <p>Object Orientated Programming in PHP and JavaScript to bring interactive interfaces and solid server-side programming to manage your data.<br />
              </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
            </div>
          </div>
        </div>
      </div>
      <div id="footer">
        <p>Copyright © 2010 Duncan Angus Wilkie</p>
      </div>
      </body>
      </html>