3 Replies Latest reply on Mar 7, 2011 4:45 PM by Websquad

    Which is best way toalign divs at bottom?

    MichaelCo Level 1

      I am hopefully getting near to completing my layout for webste and I am trying to build it as follows:-

       

      First I created a wrapper div to contain everything.

       

      Next I created a header div in which I will put my logo image jpeg as a background.

       

      Then I created a navbar div whch will contain navigation.

       

      I wil save above as a template as most of this should not change. All above divs are 960px wide with margins 0 auto 0 auto

       

      All the above has been achieved and would appear to be ok

       

      What I am trying to do now is create a mainbody div and in it two divs which by using float left and float right have managed to both divs aligning at top of mainbody div. One div is called leftbody and the other called rightbody. I have given mainbody div a red background, leftbody a blue background and rightbody a green background in order to view what s happening.

       

      I am wanting to enter text and images to rightbody and leftbody.

       

      When the text in leftbody goes farther down the page than the text in rightbody , the red background from mainbody appears below the green background of rightbody which is fine.

       

      But when the text in rightbody goes farther down the page than the text in leftbody, the red background from mainbody does not appear.

      How do I fix this so that the red background appears?

       

      and can I sort it so that if one dv is longer than the other, it creates a green or blue space to align the divs at the bottom

       

      I am sorry if this is a bit long winded but I am trying to make my question clear - hopefully the answer will be clear also.

       

       

       

      My code  and css is as follows if it helps.

       

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <title>Untitled Document</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <link href="style.css" rel="stylesheet" type="text/css">
      </head>

       

      <body>
      <div id ="wrapper">
       
        this is wrapper div
       
      <div id="header">Content
          for id "header" Goes
          Here</div>
       
          <div id="navbar">this
            is navbar div wrapped
            inside wrapper div</div>
          <div id="mainbody">Content
            for id "mainbody" Goes
            Here
          <div id="bodyright">
            <p>Content
            for id "bodyright" Goes
            Here GReen writing
            goes here Content
            for id "bodyright" Goes
            Here GReen writing
            goes here Content
            for id "bodyright"</p>
            </div>
           
            <div id="bodyleft">Content
            for id "bodyleft" Goes
            Here Content
            for id "bodyleft" Goes
            Here Content<br>
      for id &quot;bodyleft&quot; Goes<br>
      <br>
      </div>
           
        </div>
        
      </div>

       

       

       

      </body>
      </html>

       

       

       

       

      /* CSS Document */

       

      #wrapper {
          background-color: #FFFF00;
          width: 960px;
          margin-top: 10px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
          }
         
      #navbar {
          background-color: #FFFF00;
          width: 960px;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
      }
      #header {
          background-color: #FF6666;
          width: 960px;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
      }

       


      #mainbody {
          background-color:#FF0033;
          width: 960px;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
             
      }

       

       

       


      #bodyright {
          background-color: #66FF00;
          float: right;
          width: 760px;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;

       

         
      }

       

      #bodyleft  {
          background-color:#0000FF;
          width: 200px;
      }