1 Reply Latest reply on Aug 30, 2011 10:54 AM by MurraySummers

    Div layout issue with template

    AspiringDIV Level 1

      <!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" />
      <!-- TemplateBeginEditable name="PageTitle" -->
      <title></title>
      <!-- TemplateEndEditable -->
      <link href="../CSS/style_sheet.css" rel="stylesheet" type="text/css"/>

      <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-17957242-1']);
        _gaq.push(['_trackPageview']);

        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

      </script>

      <style type="text/css">
      <!--
      body {
          background-color: #F2EACE;
      }
      -->
      </style></head>

      <body>

      <div id="container_header">


      <div id="logo_container"><a href="http://www.thewharfhouse.co.uk"><img src="../Images/the_wharf_house_logo.png" width="466" height="53" alt="The Wharf House" /></a>
      </div>

      <div id="header_text_container">
      Over, Gloucester, GL2 8DB | <a href="mailto:thewharfhouse@yahoo.co.uk">enquiries@thewharfhouse.co.uk</a> | 01452 332 900
      </div>



      </div>
      <div id="container_body">

      <div id="container_body_left_sidebar">

      <div id="navcontainer">
                <ul>
                  <li><a href="../index.html">Home</a></li>
                  <li><a href="../restaurant.html">Restaurant</a>
                    <ul>
                    <li><a href="../christmas-menu.html">Christmas 2011</a></li>
                      <li><a href="../daytime-menu.html">Daytime Menu</a></li>
                      <li><a href="../evening-menu.html">Evening Menu</a></li>
                      <li><a href="../wine-list.html">Wine List</a></li>
                      <li><a href="../tapas-on-the-terrace.html">Tapas on the Terrace</a></li>             
                                                                    
                    </ul>
                  </li>
                  <li><a href="../accommodation.html">Accommodation</a></li>
                  <li><a href="../visitor-centre-and-shop.html">Visitor Centre & Shop</a></li>
                  <li><a href="../news-and-events.html">News & Events</a></li>
                  <li><a href="../functions-and-weddings.html">Functions & Weddings</a></li>
                              <li><a href="../the-local-area.html">The Local Area</a></li><li><a href="../photovoltaic-panels.html">Photovoltaic Panels</a></li>
                             
                  <li><a href="../contact-us.html">Contact Us</a></li>
                   
                  </li>
            </ul>
         
          </div>

      <div id="container_body_left_sidebar_award">

        <img src="../Images/aa_guest_accommodation_rating_logo.png" width="85" height="135" alt="AA Guest Accommodation" /></div>

      <div id="container_body_left_sidebar_award">

        <img src="../Images/aa_rosette_restaurant_logo.png" width="88" height="138" alt="AA Rosette Restaurant"/></div>


      </div>

      <div id="container_body_main">

      <div id="container_body_main_editableregion_gallery">
      <!-- TemplateBeginEditable name="gallery" -->Image gallery or YouTube video here<!-- TemplateEndEditable -->
      </div>

      <div id="container_body_main_editableregion_h1">
      <h1><!-- TemplateBeginEditable name="h1" -->H1 here<!-- TemplateEndEditable --></h1>
      </div>

      <div id="container_body_main_editableregion_h2">
      <h2><!-- TemplateBeginEditable name="h2" -->H2 here<!-- TemplateEndEditable --></h2>
      </div>

      <div id="container_body_main_editableregion_body">
      <!-- TemplateBeginEditable name="body" -->Body content here<!-- TemplateEndEditable -->
      </div>



      </div>

      </div>

      <div id="container_body_right_sidebar">

      <div id="container_body_right_sidebar_heading">

      <p>Email newsletter</p>
      </div>


      <div id="container_body_right_sidebar_constantcontact">

      <!-- BEGIN: Constant Contact Basic Opt-in Email List Form -->
      <div align="center">
      <table border="0" cellspacing="0" cellpadding="3" bgcolor="#E6D69C" style="border:2px solid #840000;">
      <tr>
      <td align="center" style="font-weight: bold; font-family:Georgia; font-size:12px; color:#840000;">Enter your email address</td>
      </tr>
      <tr>
      <td align="center" style="border-top:2px solid #840000">
      <form name="ccoptin" action="http://visitor.r20.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:2;">
      <input type="hidden" name="llr" value="7e9jmieab">
      <input type="hidden" name="m" value="1104087935132">
      <input type="hidden" name="p" value="oi">
      <font style="font-weight: normal; font-family:Georgia; font-size:12px; color:#000000;"></font> <input type="text" name="ea" size="20" value="" style="font-size:10pt; border:1px solid #999999;">
      <input type="submit" name="go" value="Go" class="submit" style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10pt;">
      </form>
      </td>
      </tr>
      </table>
      </div>
      <!-- END: Constant Contact Basic Opt-in Email List Form -->

      </div>

      <div id="container_body_right_sidebar_heading">

      <p>Twitter</p>
      </div>

      <div id="container_body_right_sidebar_twitter">

      <script src="http://widgets.twimg.com/j/2/widget.js"></script>
      <script>
      new TWTR.Widget({
        version: 2,
        type: 'profile',
        rpp: 3,
        interval: 30000,
        width: 200,
        height: 300,
        theme: {
          shell: {
            background: '#840000',
            color: '#ffffff'
          },
          tweets: {
            background: '#E6D69C',
            color: '#000',
            links: '#840000'
          }
        },
        features: {
          scrollbar: false,
          loop: false,
          live: false,
          hashtags: true,
          timestamp: true,
          avatars: false,
          behavior: 'all'
        }
      }).render().setUser('thewharfhouse').start();
      </script>

      </div>

      <div id="container_body_right_sidebar_heading">

      <p> Facebook</p>
      </div>

      <div id="container_body_right_sidebar_facebook">

      <!-- Facebook Badge START --><a href="https://www.facebook.com/pages/The-Wharf-House/206641076059709" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="The Wharf House">The Wharf House</a><br/><a href="https://www.facebook.com/pages/The-Wharf-House/206641076059709" target="_TOP" title="The Wharf House"><img src="https://badge.facebook.com/badge/206641076059709.1822.407963747.png" style="border: 0px;" /></a><br/><a href="http://www.facebook.com/business/dashboard/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Promote Your Page Too</a><!-- Facebook Badge END -->

      </div>

      </div>


      <div id="container_footer">

      <p>The Wharf House, Over, Gloucester, GL2 8DB | <a href="mailto:thewharfhouse@yahoo.co.uk">enquiries@thewharfhouse.co.uk</a> | 01452 332 900</p>

      <p><a href="../index.html">Home</a> | <a href="../restaurant.html">Restaurant</a> | <a href="../accommodation.html">Accommodation</a> | <a href="../visitor-centre-and-shop.html">Visitor Centre & Shop</a> | <a href="../news-and-events.html">News &amp; Events</a> | <a href="../functions-and-weddings.html">Functions &amp; Weddings</a> | <a href="../the-local-area.html">The Local Area</a> | <a href="../the-local-area.html">Photovoltaic Panels</a> | <a href="../photovoltaic-panels.html">Contact Us</a></p>

      <p>Website design by <a href="http://www.sopublishing.com">So Publishing</a> and Natasha Turney</p>

      </div>

      </body>
      </html>

       

      STYLE SHEET

       

      @charset "utf-8";
      html {
          min-height: 100%;
          margin-bottom: 1px;
      }

      body {
          background-color: #FFFFFF;
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 11px;
          color: # 333;
          line-height: 1.4em;
          text-align: left;
          font-weight: normal;
          margin-left: 0px;
          margin-right: 0px;
          margin-top: 0px;
          margin-right: 0px;
      }
      p {
          margin-bottom: 1.2em;
          margin-top: 0em;
          color: #000;
          font-style: normal;
      }
      img {
          border: 0px;
      }
      h1 {
          font-size: 19px;
          color: #E6D69C;
          margin-top: 0px;
          margin-left: 0px;
          margin-right: 0px;
          margin-bottom: 1em;
          font-weight: bold;
      }
      h2 {
          color: #333;
          font-size: 16px;
          margin-top: 2px;
          margin-right: 0px;
          margin-bottom: 0.4em;
          margin-left: 0px;
          font-weight: 100;
      }
      h3 {
          color: #840000;
          font-size: 14px;
          margin-top: 2px;
          margin-right: 0px;
          margin-bottom: 1em;
          margin-left: 0px;
          font-weight: bold;
      }
      h4 {
          margin-bottom: 0.1em;
          margin-top: 0em;
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 11px;


          color: # 333;
          line-height: 1.4em;
          text-align: left;
          font-weight: normal;
          color: #000;
          font-style: normal;
      }
      h5 {
          margin-bottom: 0.9em;
          margin-top: 0em;
          font-family: Georgia, "Times New Roman", Times, serif;
          font-size: 11px;
          color: # 333;
          line-height: 1.4em;
          text-align: left;
          color: #000;
      }
      a:link {
          color: #840000;
          text-decoration: none;
      }
      a:visited {
          text-decoration: none;
          color: #840000;
      }
      a:hover {
          color: #840000;
          text-decoration: underline;
      }
      a:active {
          color: #999999;
          text-decoration: underline;
      }
      hr {
        border: 1px;
        width: 100%;
        background-color: #E6D69C;
        color: #E6D69C;
        height: 2px;
      }
      #container_header {
          width: 940px;
          height: auto;
          background-color:#E6D69C;
          margin: auto;
          border-top: 5px solid #840000;
          border-left: 5px solid #840000;
          border-right: 5px solid #840000;
          border-bottom: 0px solid #840000;
          padding-top: 0px;
          padding-right: 0px;
          padding-bottom: 0px;
          padding-left: 0px;
          margin-top: 5px;
      }
      #logo_container {
          width: 466px;
          padding-left: 10px;
          padding-top: 10px;
      }
      #header_text_container {
          width: 466px;
          padding-left: 10px;
          padding-top: 5px;
          padding-bottom: 10px;
      }
      #container_body {
          width: 940px;
          height: auto;
          background-color:#E6D69C;
          margin: auto;
          border-top: 5px solid #840000;
          border-left: 5px solid #840000;
          border-right: 5px solid #840000;
          border-bottom: 0px solid #840000;
          padding-top: 0px;
          padding-right: 0px;
          padding-bottom: 0px;
          padding-left: 0px;
      }
      #container_footer {
          width: 940px;
          height: auto;
          background-color:#E6D69C;
          margin: auto;
          border-top: 5px solid #840000;
          border-left: 5px solid #840000;
          border-right: 5px solid #840000;
          border-bottom: 5px solid #840000;
          padding-top: 10px;
          padding-right: 0px;
          padding-bottom: 0px;
          padding-left: 0px;
          text-align: center;
          line-height: 10px;
      }
      #container_body_left_sidebar {
          width: 165px;
          height: auto;
          float: left;
          background-color:#FFFFFF;
          padding-left: 0px;
          padding-right: 0px;
          margin-top: 0px;
      }
      #container_body_left_sidebar_award {
          width: 85px;
          height: 135;
          float: left;
          padding-top: 8px;
          padding-left: 40px;
          padding-right: 40px;
          margin-top: 0px;
      }
      #container_body_main {
          width: 545px;
          height: 800px;
          float: left;
          background-color:#FFF;
          border-left: 5px solid #840000;
          border-right: 5px solid #840000;
          padding-left: 0px;
          padding-right: 0px;
          margin-top: 0px;
      }
      #container_body_main_editableregion_gallery {
          float: left;
          width: 100%;
      }
      #container_body_main_editableregion_h1 {
          float: left;
          height: 26px;
          width: 100%;
          background-color:#840000;
          padding-top: 7px;
          padding-left: 5px;
      }
      #container_body_main_editableregion_h2 {
          float: left;
          width: 100%;
          padding-left: 5px;
          padding-top: 8px;
          }
      #container_body_main_editableregion_body {
          float: left;
          width: 100%;
          padding-left: 5px;
          padding-right: 25px;
          padding-top: 8px;
      }
      #container_body_right_sidebar {
          width: 220px;
          height: auto;
          float: left;
          background-color:#FFFFFF;
          padding-left: 0px;
          padding-right: 0px;
          margin-top: 0px;
      }
      #container_body_right_sidebar_heading {
          width: 220px;
          height: 30px;
          float: left;
          background-color:#840000;
          text-align: center;
          margin-left: 0px;
          margin-right: 0px;
          margin-top: 5px;
          margin-bottom: 5px;
      }
      #container_body_right_sidebar_heading p {
          font-size: 12px;
          font-weight: 300;
          color: #E6D69C;
          padding-top: 5px;
      }
      #container_body_right_sidebar_constantcontact {
          width: 200px;
          height: auto;
          float: left;
          padding-left: 10px;
          padding-right: 10px;
          margin-top: 0px;
          margin-bottom: 15px;
      }
      #container_body_right_sidebar_twitter {
          width: 200px;
          height: auto;
          float: left;
          padding-left: 10px;
          padding-right: 10px;
          margin-top: 0px;
          margin-bottom: 15px;
      }
      #container_body_right_sidebar_facebook {
          width: 120px;
          height: auto;
          float: left;
          padding-left: 50px;
          padding-right: 50px;
          margin-top: 0px;
      }
      #navcontainer {
          width:145px;
          float: left;
          padding-left: 10px;
          margin-top: 10px;
          }
      #navcontainer ul {
      margin: 0pt;
      padding: 0pt;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 11px;
      list-style: url(none) none;
      }
      #navcontainer li {
          margin: 0;
      }
      #navcontainer a {
          display: block;
          color: #840000;
          width: 13em;
          text-decoration: none;
          border-bottom: 1px solid #E6D69C;
          font-weight: bold;
          padding-top: 3px;
          padding-right: 12px;
          padding-bottom: 3px;
          padding-left: 0px;
      }
      #navcontainer a:hover {
          color: #840000;
          text-decoration: underline;
      }
      #navcontainer a:active {
          color: #333;
          text-decoration: underline;
      }
      #navcontainer li li a
      {
          display: block;
          color: #840000;
          width: 13em;
          padding: 3px 3px 3px 9px;
          text-decoration: none;
          border-bottom: 1px solid #E6D69C;
          font-weight: normal;
      }

      Evening all,

       

      Probably a rather basic query for you pros out there, but I'm having problems with getting a basic CSS DIV template working as expected.

       

      It should be a header div, body div and footer div - with the body div then containing three 'column' divs if you like. I think it must be something do to with the way I've setup floats and so on, but the footer isn't displaying as it should and it also looks wrong in the DW design window too.

       

      Any help very appreciated and let me know if you need more info!

       

      Thanks all

        • 1. Re: Div layout issue with template
          MurraySummers Level 8

          Change this -

           

          <div id="container_body">

           

          to this -

           

          <div id="container_body" style="overflow:hidden">

           

          and things improve dramatically.  The problem within that container is clearly one of float management.

           

          Then remove the width=100% on the div#container_body_main_editableregion_body.  Finally, select all of div#container_body_right_sidebar, cut it from the page, and paste it back in immediately before the closing </div> for div#container_body, and I think you are done.