title: CSS Float issue with IFrames
body: <p>I added an Iframe to a page and it pushed my sidebar down.  I tried different ways to float it, but I'm still stuck.  Any help would be appreciated.  Here's the HTML and CSS for the page:</p>
  
  <p><a href="http://lkwalker.com/writing.html" rel="nofollow">http://lkwalker.com/writing.html</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;LK Walker&lt;/title&gt;
    &lt;meta name="description" content="website description" /&gt;
    &lt;meta name="keywords" content="website keywords, website keywords" /&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
    &lt;!-- modernizr enables HTML5 elements and feature detects --&gt;
    &lt;script type="text/javascript" src="js/modernizr-1.5.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="main"&gt;
      &lt;header&gt;
        &lt;div id="logo"&gt;
          &lt;div id="logo_text"&gt;
            &lt;!-- class="logo_colour", allows you to change the colour of the text --&gt;
            &lt;h1&gt;&lt;a href="index.html"&gt;Lauren K. Walker
        &lt;p&gt;&lt;span class="logo_colour"&gt; | Teacher | &lt;/span&gt; &lt;span class="logo_colour"&gt;Writer | &lt;/span&gt;&lt;/span&gt; &lt;span class="logo_colour"&gt;Yogi | &lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;nav&gt;
          &lt;ul class="sf-menu" id="nav"&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="schedule.html"&gt;Schedule&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="retreats.html"&gt;Retreats&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="privates.html"&gt;Privates&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;li&gt;&lt;a href="EMyoga.html"&gt;Energy Medicine Yoga&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="military.html"&gt;Military&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="writing.html"&gt;Writing&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="social.html"&gt;Social Media&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="theater.html"&gt;Theatre&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;li&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/nav&gt;      
      &lt;/header&gt;
      &lt;div id="site_content"&gt;
        &lt;div id="top_border"&gt;&lt;/div&gt;   
        &lt;ul id="images"&gt;
      &lt;li&gt;&lt;img src="images/lkwalker.jpg" width="600" height="300" alt="LK Walker" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/navasana.jpg" width="600" height="300" alt="Navasana" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/donna.jpg" width="600" height="300" alt="Donna Eden" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/tree.jpg" width="600" height="300" alt="Tree" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/raven.jpg" width="600" height="300" alt="Birding" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="images/yogacow.jpg" width="600" height="300" alt="Cow Pose" /&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="content"&gt;
          &lt;h1&gt;Articles&lt;/h1&gt;
      &lt;iframe width="500" height="400" align="left" src ="http://lkwalkerwriting.blogspot.com/" width="500" height="500"&gt;
        &lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
      &lt;/iframe&gt;&lt;br /&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="http://www.nytimes.com/2012/04/15/education/edlife/upward-facing-soldier.html?smid=pl-share"&gt; New York Times -
      Upward Facing Soldier &lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.mnn.com/health/fitness-well-being/stories/do-you-have-to-be-skinny-to-do-yoga"&gt;Mother Nature News -
      Do you need to be Skinny to do Yoga?&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.mnn.com/health/fitness-well-being/stories/what-is-energy-medicine-yoga"&gt; Mother Nature News -
      What is Energy Medicine Yoga?&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="sidebar_container"&gt;
          &lt;img class="paperclip" src="images/paperclip.png" alt="paperclip" /&gt;
          &lt;div class="sidebar"&gt;
            &lt;h4&gt;&lt;p&gt;Check out our newest clothing partner, &lt;a href="http://www.mahadevidesign.com/"&gt;MahaDevi&lt;/a&gt;, use code EMYoga to get a 15% discount.&lt;/p&gt;
            &lt;p&gt;&lt;em&gt;Like us on FaceBook - Follow us on Twitter&lt;/em&gt;&lt;!-- START SOCIAL MEDIA WIDGET --&gt;&lt;ul id="socialbar"&gt;&lt;li id="facebook"&gt;&lt;a target="_blank" href="htp://www.facebook.com/EnergyMedicineYoga"&gt;&lt;IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/facebook.png"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li id="twitter"&gt;&lt;a target="_blank" href="http://twitter.com/energymedyoga"&gt;&lt;IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/twitter.png"&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;style&gt;#socialbar img {border:0px;}#socialbar li img {width:48px; height:48px;}#socialbar li a:hover {position:relative;top:2px;}#socialbar{padding:0px;list-style: none outside none; margin:0px; position: static;}#socialbar li {display:inline;padding-right:2px;}#socialbar{width:180px;text-align:center;}&lt;/style&gt;&lt;!-- END SOCIAL MEDIA WIDGET --&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
        &lt;footer&gt;
        &lt;p&gt;Copyright &amp;copy; Energy Medicine Yoga| Whitefish, MT | &lt;a href="contact.php"&gt;Contact Us&lt;/a&gt; |&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
    &lt;p&gt;&amp;nbsp;&lt;/p&gt;
    &lt;!-- javascript at the bottom for fast page loading --&gt;
    &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/jquery.easing-sooper.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/jquery.sooperfish.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
        $('#images').kwicks({
          max : 600,
          spacing : 2
        });
        $('ul.sf-menu').sooperfish();
      });
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@font-face { 
    font-family: Jacques Francois, times, serif; 
      src: url('../fonts/Jacques Francois.otf'); 
      src: local("Jacques Francois"), url('../fonts/Jacques Francois.otf'); 
  } 
  
  @font-face { 
    font-family: lilly, arial, sans-serif; 
      src: url('../fonts/lilly.ttf'); 
      src: local("lilly"), url('../fonts/lilly.ttf'); 
  }
  
  html { 
    height: 100%;
  }
  
  * { 
    margin: 0;
    padding: 0;
  }
  
  /* tell the browser to render HTML 5 elements as block */
  article, aside, figure, footer, header, hgroup, nav, section { 
    display:block;
  }
  
  body { 
    font: normal .80em 'lilly', sans-serif;
    background: #cab0cb;
    color: #444;
    height: 100%;
    width: 1000px;
  }
  
  p { 
    padding: 0 0 20px 0;
    line-height: 1.7em;
  }
  
  img { 
    border: 0;
  }
  
  h1, h2, h3, h4, h5, h6 { 
    font-family: 'Jacques Francois', serif;
    letter-spacing: 0em;
    padding: 0 0 5px 0;
    text-align: center;
  }
  
  h1, h2, h3 { 
    margin: 0 0 15px 0;
    padding: 15px 0 5px 0;
  }
  
  h2 { 
    font-size: 160%;
    padding: 9px 0 5px 0;
    color: #04662e;
  }
  
  h3 { 
    font-size: 140%;
    padding: 5px 0 0 0;
  }
  
  h4, h6 { 
    color: #615044;
    padding: 0 0 5px 0;
    font-family: normal 160% 'Jacques Francois', serif;
    font: bold 145% times, serif;
  }
  
  h5, h6 { 
    color: #615044;
    font: italic 95% times, serif;
    letter-spacing: normal;
    padding: 0 0 15px 0;
  }
  
  a, a:hover { 
    outline: none;
    text-decoration: underline;
    color: #B30303;
  }
  
  a:hover { 
    text-decoration: none;
  }
  
  blockquote { 
    margin: 20px 0; 
    padding: 10px 20px 0 20px;
    border: 1px solid #E5E5DB;
    background: #FFF;
  }
  
  ul { 
    margin: 2px 0 22px 17px;
    clear: both;
  }
  
  ul li { 
    list-style-type: circle;
    margin: 0 0 6px 0; 
    padding: 0 0 4px 5px;
    line-height: 1.5em;
  }
  
  ol { 
    margin: 8px 0 22px 20px;
  }
  
  ol li { 
    margin: 0 0 11px 0;
  }
  
  .left { 
    float: left;
    width: auto;
    margin-right: 10px;
  }
  
  .right { 
    float: right; 
    width: auto;
    margin-left: 10px;
  }
  
  .center { 
    display: block;
    text-align: center;
    margin: 20px auto;
  }
  
  #main, nav, #container, #logo, #site_content, footer
    { 
    margin-left: auto; 
    margin-right: auto;
    }
  
  #main {
    margin: 5px auto;
    width: 940px;
    background: transparent;
    padding-bottom: 30px;
  }
  
  
  header { 
    background: transparent;
    height: 130px;
  }
  
  #logo { 
    width: 940px;
    height: 140px;
    background: transparent;
    color: #888;
    padding: 0;
    float: left;
    border-bottom: 1px solid #AFABAB;}
  
  #logo h1, #logo h2 { 
    font-family: normal 320% 'Jacques Francois', times, serif;
    border-bottom: 0;
    text-transform: none;
    margin: 0;
  }
  
  #logo_text h1, #logo_text h1 a, #logo_text h1 a:hover { 
    padding: 0;
    color: #331d59;
    text-decoration: none;
    font-size: 48px;
  }
  
  #logo_text h1 a .logo_colour { 
    color: #2c89b3;
  }
  
  #logo_text a:hover .logo_colour { 
    color: #2c89b3;
  }
  
  #logo_text h2 { 
    font-size: 140%;
    padding: 0 0 0 0;
    color: #04662e;
  }
  
  nav { 
    height: 44px;
    float: right;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width:90%;
    padding: 10px 10px;
    color: #222;
    border-top: 2px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    width: 100%;
  }
  
  iframe
    { 
    width: 60%;
    clear: both;
  
    }
  
  #site_content { 
    width: 940px;
    overflow: hidden;
    margin: 0 auto 0 auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #AFABAB;   
  } 
  
  #top_border {
    border-top: 1px solid #fff;   
    padding-top: 20px;} 
  
  #sidebar_container { 
    float: right;
    vertical-align: top;
    display: inline;
    width: 30%;
    margin: 0 0 0 0;
  }
  .sidebar { 
    float: right;
    vertical-align: top;
    width: 180px;
    margin: 0 0 17px 0;
    background: #EFF8FB;
    border-radius: 7px 7px 7px 7px;
    -moz-border-radius: 7px 7px 7px 7px;
    -webkit-border: 7px 7px 7px 7px;
    padding: 0 15px 5px 13px;
  }
  
  .sidebar h3, .content h1 { 
    padding: 0 15px 20px 0;
    font: 230% 'Days', arial, sans-serif;
    font-style: bold;
    text-shadow:  #FFF 1px 1px;
    margin: 0 1px;
    color: #444;
  }
  
  .sidebar h3 { 
    color: #444;
    font: 250% 'Lilly', arial, sans-serif;
    padding: 0 15px 5px 0;  
  }
  
  .sidebar ul { 
    margin: 0 0 15px 0;
  } 
  
  .sidebar li a, .sidebar li a:hover { 
    color: #555;
    text-decoration: none;
  } 
  
  .sidebar li a:hover { 
    text-decoration: underline;
  } 
  
  .sidebar_item, .content_item { 
    padding: 15px 0;
  }
  
  .paperclip { 
    position: relative; 
    z-index: 0;
    vertical-align: middle; 
    margin: -15px 0 -60px -40px;
  }
  
  .content { 
    text-align: left;
    width: 670px;
    margin: 25px 0 0 0;
    float: left;
    font-size: 120%;
  }
  
  .content ul { 
    margin: 2px 0 22px 0px;
  }
  
  .content ul li, .sidebar ul li { 
    list-style-type: none;
    background: url(../images/bullet.png) no-repeat;
    margin: 0 0 0 0; 
    padding: 0 0 4px 28px;
    line-height: 1.5em;
  }
  
  footer { 
    width: 940px;
    clear: both;
    font: 170% 'Lilly', arial, sans-serif;
    height: 30px;
    padding: 20px 0 20px 0;
    float: left;
    text-align: center;
    border-top: 10px solid #eeeeee;
  }
  
  footer p { 
    line-height: 1.7em;
    padding: 0 0 10px 0;
    color: #000;
  }
  
  footer a { 
    color: #000;
    text-decoration: 1px 1px #FFF;
  }
  
  footer a:hover { 
    color: #000;
    text-shadow: none;
    text-decoration: underline;
  }
  
  .form_settings { 
    margin: 15px 0 0 0;
  }
  
  .form_settings p { 
    padding: 0 0 4px 0;
  }
  
  .form_settings span { 
    float: left; 
    width: 200px; 
    text-align: left;
  }
  
  .form_settings input, .form_settings textarea { 
    padding: 5px; 
    width: 299px; 
    font: 100% arial; 
    border: 1px solid #D5D5D5; 
    background: #FFF; 
    color: #47433F;
    border-radius: 7px 7px 7px 7px;
    -moz-border-radius: 7px 7px 7px 7px;
    -webkit-border: 7px 7px 7px 7px;  
  }
  
  .form_settings .submit { 
    font: 140% 'Days', arial, sans-serif; 
    border: 0; 
    width: 99px; 
    margin: 0 0 0 212px; 
    height: 33px;
    padding: 2px 0 3px 0;
    cursor: pointer; 
    background: #ddd; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#fff, #ddd);
    background: -o-linear-gradient(#fff, #ddd);
    background: -webkit-linear-gradient(#fff, #ddd);
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
    border: 1px solid #ddd;
    border-radius: 7px 7px 7px 7px;
    -moz-border-radius: 7px 7px 7px 7px;
    -webkit-border: 7px 7px 7px 7px;
    color: #222;
    text-shadow: 1px 1px #FFF;
  }
  
  .form_settings textarea, .form_settings select { 
    font: 100% arial; 
    width: 299px;
  }
  
  .form_settings select { 
    width: 310px;
  }
  
  .form_settings .checkbox { 
    margin: 4px 0; 
    padding: 0; 
    width: 14px;
    border: 0;
    background: none;
  }
  
  .separator { 
    width: 100%;
    height: 0;
    border-top: 1px solid #D9D5CF;
    border-bottom: 1px solid #FFF;
    margin: 0 0 20px 0;
  }
  
  table { 
    margin: 10px 0 30px 0;
  }
  
  table tr th, table tr td { 
    background: #BBB;
    color: #FFF;
    padding: 7px 4px;
    text-align: left;
  }
  
  table tr td { 
    background: #DDD;
    color: #444;
    border-top: 1px solid #FFF;
  }
  
  /* Image Transitions */
  ul#images {
    margin: 0 15px 10px 0;
    padding: 0;
    list-style: none;
    position: relative;
  }
  
  ul#images li {
    display: block;
    overflow: hidden;
    padding: 0;
    float: left;
    width: 155px;
    height: 300px;
  }
  
  /**
  Stylesheet for SooperFish by www.SooperThemes.com
  Author: Jurriaan Roelofs
  **/
  
  /* Configuration of menu width */
  html body ul.sf-menu ul,html body ul.sf-menu ul li { 
    width: 200px;
  }
  
  html body ul.sf-menu ul ul { 
    margin: 0 0 0 200px;
  }
  
  /* Framework for proper showing/hiding/positioning */
  ul.sf-menu,ul.sf-menu * { 
    margin: 0;
    padding: 0;
  }
  
  ul.sf-menu { 
    display: block;
    position: relative;
  }
  
  ul.sf-menu li { 
    display: block;
    list-style: none;
    float: left;
    position: relative;
  }
  
  ul.sf-menu li:hover { 
    visibility: inherit; /* fixes IE7 'sticky bug' */ 
  }
  
  ul.sf-menu a { 
    display: block;
    position: relative;
  }
  
  ul.sf-menu ul { 
    position: absolute;
    width:70%;
    top: auto;
  }
  
  ul.sf-menu ul a { 
    zoom: 1; /* IE6/7 fix */ 
  }
  
  ul.sf-menu ul li { 
    float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
    width: 150px;
  }
  
  ul.sf-menu ul ul { 
    top: 0;
    margin: 0 0 0 150px;
  }
  
  ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
  ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
  ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
  ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
    left: auto;
  }
  
  ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
  ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
  ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
  ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
    left: -999999px;
  }
  
  /* autoArrows CSS */
  span.sf-arrow { 
    width: 7px;
    height: 7px;
    position: absolute;
    top: 20px;
    right: 5px;
    display: block;
    background: url(../images/arrows-black.png) no-repeat 0 0;
    overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
    font-size: 1px;
  }
  
  ul ul span.sf-arrow { 
    right: 5px;
    top: 20px;
    background-position: 0 100%;
  }
  
  /* Theming the menu */
  ul#nav { 
    float: left;
  }
  
  ul#nav ul { 
    background: #ddd;
    margin-top: 5px;
    padding-bottom: 15px;
  }
  
  ul#nav li a { 
    padding: 7px 18px 6px 18px;
    font: 150% 'Lilly', arial, sans-serif;
    text-decoration: none;
    color: #000;
    margin-right: 2px;
  }
  
  ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus { 
    color: #000;
    text-shadow: 1px 1px #fff;
  }
  
  ul#nav ul li a { 
    color: #000;
  }
  
  ul#nav ul li a:hover { 
    color: #B30303;
    margin-right: 2px;
  }
  
  /* Image Transitions */
  ul#images {
    margin: 0 15px 10px 0;
    padding: 0;
    position: relative;
  }
  
  ul#images li {
    display: block;
    overflow: hidden;
    padding: 0;
    float: left;
    width: 155px;
    height: 300px;
    list-style: none;
  }
  </code></pre>