Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Cleveland, OH
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV container not expanding/wrapping down page

    Hi guys,

    Novice problem here: My container is not wrapping down the rest of my page and the sidebar div and main content are being pushed to the left right sides of the page as the container is not "containing" it.

    Here is the page: http://lot17design.com/indexvideo.html


    I have set no height to my container and it has a "clear float" so I am not sure. Here is my code:

    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>The National Ohio Gold &amp; Diamond Exchange</title>
    <style type="text/css">
    <!--
    body {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #666666;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    	color: #000000;
    	background-image: url(/Images/goldexchange_background.jpg);
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-color: #006;
    }
    .twoColFixRtHdr #container {
    	width: 780px;
    	border: 0px solid #000000;
    	text-align: left;
    	margin-top: 400;
    	margin-right: auto;
    	margin-bottom: 50px;
    	margin-left: auto;
    	background-image: url(/Images/OhioGold_Transparent_Container_Div.png);
    }
    .Video {
    	height: 440px;
    }
    .twoColFixRtHdr #header {
    	padding-top: 0;
    	padding-right: 0px;
    	padding-bottom: 0;
    	padding-left: 0px;
    	background-color: #005A86;
    	height: 640px;
    	z-index: 1020;
    	color: #FFF;
    	font-family: Verdana, Geneva, sans-serif;
    	margin-top: 1px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }
    .twoColFixRtHdr #header h1 {
    	margin: 0;
    	padding: 10px 0;
    	font-family: Verdana, Geneva, sans-serif;
    	color: #FFF;
    	text-indent: 20px;
    }
    .twoColFixRtHdr #sidebar1 {
    	float: right;
    	width: 270px;
    	background: #EBEBEB;
    	padding-top: 15px;
    	padding-right: 10px;
    	padding-bottom: 15px;
    	padding-left: 10px;
    }
    .twoColFixRtHdr #mainContent {
    	margin: 0 250px 0 0;
    	padding: 0 20px;
    	font-family: Verdana, Geneva, sans-serif;
    	top: 600px;
    }
    .twoColFixRtHdr #footer {
    	text-align: center;
    	font-size: 70%;
    	background-color: #DDDDDD;
    	background-image: url(/Images/Goldexchange_footer_transparent.png);
    	padding-top: 0;
    	padding-right: 10px;
    	padding-bottom: 0;
    	padding-left: 20px;
    }
    .twoColFixRtHdr #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;
    }
    .Branding Image {
    	padding-top: 10px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    	margin-top: 200px;
    	font-family: Verdana, Geneva, sans-serif;
    	color: #FFF;
    }
    #Breadcrumb {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 12px;
    	color: #039;
    	top: 200px;
    }
    -->
    </style>
    <!--[if IE 5]>
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixRtHdr #sidebar1 { width: 220px; }
    </style>
    <![endif]-->
    <!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixRtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixRtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: underline;
    }
    a:active {
    	text-decoration: none;
    }
    -->
    </style></head>
    <body class="twoColFixRtHdr">
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="footer">
      <p> </p>
      <p>
      <img src="/Images/OhioGoldExchange_HeaderOld.png" alt="header" width="780" height="120" border="0" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="rect" coords="704,5,739,36" href="https://www.facebook.com/ohiogoldcanton" target="_blank" alt="Facebook" />
        <area shape="rect" coords="743,5,771,38" href="https://twitter.com/#!/ohiogolddiamond" target="_blank" />
      </map>
      </p>
      <p> </p>
      <div id="container">
        <div id="header"> 
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="#">about us</a>        </li>
            <li><a href="#">faqs</a></li>
            <li><a href="#" class="MenuBarItemSubmenu">locations</a>
              <ul>
                <li><a href="#" class="MenuBarItemSubmenu">Akron</a>
                  <ul>
                    <li><a href="#">Arlington Rd</a></li>
                    <li><a href="#">Merrimar Rd</a></li>
                  </ul>
                </li>
                <li><a href="#">Canton</a></li>
                <li><a href="#">Kent</a></li>
                <li><a href="#">Lorain</a></li>
                <li><a href="#">Mayfield Heights</a></li>
              </ul>
            </li>
            <li><a href="#">trade in</a>        </li>
            <li><a href="#">contact</a></li>
          </ul>
          
    <img src="/Images/goldbackground_diamond.png" alt="diamonds" width="780" height="120" /><img src="/Images/spacer.png" />
          <div class="Video">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="775" height="436" id="FLVPlayer">
              <param name="movie" value="FLVPlayer_Progressive.swf" />
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="scale" value="noscale" />
              <param name="salign" value="lt" />
              <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=/Images/OhioGold_DiamondVideoJewelry_in_Canton&amp;autoPlay=true&amp;autoRewind=false" />
              <param name="swfversion" value="8,0,0,0" />
              <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
              <param name="expressinstall" value="/Scripts/expressInstall.swf" />
              <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
              <!--[if !IE]>-->
              <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="775" height="436">
                <!--<![endif]-->
                <param name="quality" value="high" />
                <param name="wmode" value="opaque" />
                <param name="scale" value="noscale" />
                <param name="salign" value="lt" />
                <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=/Images/OhioGold_DiamondVideoJewelry_in_Canton&amp;autoPlay=true&amp;autoRewind=false" />
                <param name="swfversion" value="8,0,0,0" />
                <param name="expressinstall" value="/Scripts/expressInstall.swf" />
                <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
                <div>
                  <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                  <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
                </div>
                <!--[if !IE]>-->
                </object>
              <!--<![endif]-->
              </object>
          </div>
        </div>
          <h1>    About Us</h1>
          <!-- end #header -->
    </div>
        <div id="sidebar1">
          <p>Updates:</p>
    <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'list',
      rpp: 5,
      interval: 6000,
      title: '@OhioGoldDiamond',
      subject: 'OhioGoldDiamond',
      width: 270,
      height: 300,
      theme: {
        shell: {
          background: '#06aec4',
          color: '#ffffff'
        },
        tweets: {
          background: '#dedede',
          color: '#444444',
          links: '#ad0000'
        }
      },
      features: {
        scrollbar: true,
        loop: false,
        live: true,
        hashtags: true,
        timestamp: true,
        avatars: true,
        behavior: 'all'
      }
    }).render().setList('OhioGoldDiamond').start();
    </script>
    </script>
    
    <div class="fb-like-box" data-href="http://www.facebook.com/ohiogoldcanton" data-width="270" data-height="395" data-show-faces="true" data-stream="true" data-header="true"></div>
          <!-- end #sidebar1 -->
        </div>
        <div id="mainContent">
          <p><img src="/Images/OhioGold_Image_180x150.png" alt="180_150" width="180" height="150" class="fltlft" />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. </p>
          <p>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>
          <p>H2 level heading </p>
          <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.</p>
          <!-- end #mainContent -->
        </div>
        <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
        <br class="clearfloat" />
        <!-- end #container -->
      </div>
      <div class="Breadcrumb" id="Breadcrumb">
        <p><a href="https://www.facebook.com/ohiogoldcanton"><img src="/Images/facebook-icon-breadcrumb.png" alt="facebook" width="40" height="40" border="0" /></a><a href="https://twitter.com/#!/ohiogolddiamond"><img src="/Images/OhioGold-twitter-icon-breadcrumb.png" alt="twitter" width="40" height="40" border="0" /></a></p>
        <p><a href="http://www.lot17design.com/index" title="About Us">about us</a> - <a href="http://www.lot17design.com/faqs.html">faqs</a><a href="http://www.lot17design.com/faqs.html"></a> - <a href="http://www.lot17design.com/locations.html">locations</a> - <a href="http://www.lot17design.com/tradein.html" title="Trade In">trade in</a> - <a href="http://www.lot17design.com/contact.html" title="Contact">contact</a>
        </p>
        <p>copyright 2012 The National Ohio Gold &amp; Diamond Exchange</p>
      </div>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>
        <!-- end #footer -->
        <script src="http://cdn.wibiya.com/Toolbars/dir_0579/Toolbar_579248/Loader_579248.js" type="text/javascript"></script>
      </p>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    Last edited by Lot17; 06-19-2012 at 09:57 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,452
    Thanks
    23
    Thanked 631 Times in 630 Posts
    I show 23 errors on this page Most missing or incomplete tags. IE: no </body>tag or </html> Go to http://validator.w3.org/ and correct the errors. This might solve your problem.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •