2 Replies Latest reply on Apr 15, 2010 1:42 PM by solid74

    Problem with divs and floats

    solid74

      Hello again all!

       

      I am a newbie at Dreamweaver and I've been trying to learn the correct way of doing things to build a solid base of understanding as I move forward.  I have received great advice to my previous hurdles here on the forum and I am very appreciative for that.  I now have a new problem to figure out and I am sure it will be crucial in understanding how pages are built properly in the future.

       

      I have a page with a #container div holding the background image and a #maincontent div centered in the middle.  In this #maincontent div I have a #body div and a #footer div, and within the #body div I have three window divs with my content.  I want to have the first take up the width of the #body div and the other two side by side beneath the first one.

       

      Sounds simple enough I'm sure.  The problem is that when I try to insert the window divs without floats they stack on top of each other, and when I try to assign a float property, the #body div shrinks and leaves the window div outside it!  I am pretty new to floats and clears so I tried assigning them to each window and just can't seem to figure it out.

       

      My #container, #maincontent, and #body divs are all auto height, so it seems logical that the window divs within it will make the div around it fit everything.  I just don't understand why the floating of the divs is messing everything up.  And I can't get my third window div in the right place without floating somehow, right?

       

      Here's my HTML:

       

      <!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></title>
      <link href="_css/main.css" rel="stylesheet" type="text/css" />
      </head>
      <body class="oneColLiqCtr">
      <div id="container">
        <div class="oneColLiqCtr" id="header"></div>
        <div class="oneColLiqCtr" id="navbackground">
          <div class="oneColLiqCtr" id="navcontainer">
            <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">SERVICES</a></li>
      <li><a href="">WEBSITES</a></li>
      <li><a href="">ABOUT</a></li>
      <li><a href="">CONTACT</a></li>
            </ul>
          </div>
        </div>
        <div id="mainContent">
          <div class="oneColLiqCtr" id="body">
            <div class="oneColLiqCtr" id="mainwindow">Content for  class "oneColLiqCtr" id "mainwindow" Goes Here</div>
            <div class="oneColLiqCtr" id="bottomwindow">Content for  class "oneColLiqCtr" id "bottomwindow" Goes Here</div>
            <div class="oneColLiqCtr" id="cornerwindow">Content for  class "oneColLiqCtr" id "cornerwindow" Goes Here</div>
          </div>
          <div class="oneColLiqCtr" id="footer">footer goes here</div>
        </div>
      </div>
        <!-- end #container -->
      </body>
      </html>
      

       


      ...and my CSS

       

      @charset "utf-8";
      body {
       font: 100% Verdana, Arial, Helvetica, sans-serif;
       background: #666666;
       margin: 0;
       padding: 0;
       text-align: center;
       color: #000000;
      }
      .oneColLiqCtr #container {
       width: 100%;
       text-align: left;
       height: auto;
       background-color: #666;
       background-image: url(../_images/misc212.jpg);
       background-repeat: repeat;
       min-width: 800px;
       margin-top: 0;
       margin-right: auto;
       margin-bottom: 0;
       margin-left: auto;
       padding-bottom: 10px;
      }
      .oneColLiqCtr #header {
       font-family: Verdana, Geneva, sans-serif;
       color: #FFF;
       border-bottom-style: solid;
       border-bottom-width: 1px;
       border-bottom-color: #FFF;
       height: 125px;
       background-image: url(../_images/header-background.png);
       background-repeat: repeat-x;
       text-align: center;
      }
      .oneColLiqCtr #navbackground {
       background-color: #333;
       border-bottom-width: 1px;
       border-bottom-style: solid;
       border-bottom-color: #FFF;
      }
      .oneColLiqCtr #navcontainer {
       height: 20px;
       width: 800px;
       margin-right: auto;
       margin-left: auto;
      }
      .oneColLiqCtr #navcontainer ul {
       list-style-type: none;
       font-family: Verdana, Geneva, sans-serif;
       margin: 0;
       padding-top: 1px;
       padding-right: 0;
       padding-bottom: 0;
       padding-left: 0;
      }
      .oneColLiqCtr #navcontainer ul li {
       display: inline;
       margin: 0px;
      }
      .oneColLiqCtr #navcontainer ul li a {
       text-decoration: none;
       color: #FFF;
       background-color: #333;
       padding-right: 0px;
       padding-left: 0px;
       display: block;
       float: left;
       text-align: center;
       border-right-width: 1px;
       border-left-width: 1px;
       border-right-style: solid;
       border-left-style: solid;
       border-right-color: #FFF;
       border-left-color: #FFF;
       width: 158px;
      }
      .oneColLiqCtr #navcontainer ul li a:hover
      {
      color: #000;
      background-color: #fff;
      }
      .oneColLiqCtr #mainContent {
       width: 800px;
       padding-top: 0;
       padding-bottom: 0px;
       height: auto;
       margin-left: auto;
       margin-right: auto;
       border-top-width: 1px;
       border-right-width: 1px;
       border-bottom-width: 1px;
       border-left-width: 1px;
       border-top-style: none;
       border-right-style: solid;
       border-bottom-style: solid;
       border-left-style: solid;
       border-top-color: #FFF;
       border-right-color: #FFF;
       border-bottom-color: #FFF;
       border-left-color: #FFF;
       background-color: #666;
      }
      .oneColLiqCtr #body {
       height: auto;
       border: 1px solid #000;
       padding: 10px;
       background-color: #FFF;
      }
      .oneColLiqCtr #mainwindow {
       height: 400px;
       width: 776px;
       border: 1px solid #F00;
       margin-bottom: 10px;
      }
      .oneColLiqCtr #bottomwindow {
       height: 175px;
       width: 480px;
       border: 1px solid #F00;
       padding: 5px;
       margin-right: 10px;
      }
      .oneColLiqCtr #cornerwindow {
       height: 175px;
       width: 250px;
       border: 1px solid #F00;
       padding: 5px;
      }
      
      .oneColLiqCtr #footer {
       height: 21px;
       text-align: center;
       border-top-width: 1px;
       border-top-style: solid;
       border-top-color: #FFF;
       color: #FFF;
       font-weight: bold;
       padding-top: 5px;
       clear: both;
      }
      

       


      I bet it's something simple I am overlooking, or an error in my code that I don't recognize.  I took a float tutorial but it didn't seem to have an example of what I am looking for.  What I am trying to accomplish with the auto height on my #body div is being able to style following pages on the site according to content and not window size, so my pages height will depend on the amount of content.  If anyone can see what I am doing wrong or can suggest a solution to my issue, I would be forever grateful!

       

      Thanks!

      Jayson

        • 1. Re: Problem with divs and floats
          osgood_ Level 8

          When you use the 'float' attribute you normally have to then use a method to clear the floats.

           

          Add float: left; back into both your 'bottomwindow' and  'cornerwindow' css.

           

          Then add overflow: hidden; to the 'body' css selector, as shown below. This will wrap the body <div> around the two floated <divs> inside it.

           

          .oneColLiqCtr #body {
          height: auto;
          border: 1px solid #000;
          padding: 10px;
          background-color: #FFF;
          overflow: hidden;
          }

          • 2. Re: Problem with divs and floats
            solid74 Level 1

            Wow, thank you so much!  I was trying to use the clear: both property in the body div but for some reason it wasn't

            fixing the problem.  So, am I correct in assuming that all child divs with floats must be cleared by the parent div?  And, if you don't mind, could you tell me the difference between the clear property and the overflow property?  This is a breakthrough for me so I want to make sure I fully understand it!

             

            Looks like I need to find a glossary of CSS properties as it applies to Dreamweaver lol.  Google to the rescue!

             

            Thanks again for your assistance, much appreciated