Why does this small floated div shift my paragraph?

**benkenobi77** · 09-25-2008, 04:49 AM

I am trying to figure out why this small, floated div (was going to hold a flash slideshow) on the left in the first paragraph shifts the line-height of the paragraph down and creates a gap? I've tried numerous things to try to remedy it and nothing works - I'm stumped. Any help would be greatly appreciated.

http://www.ta77.net/SDM/index.html

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title></title>
   
   
   
               
                                       <!--IE CSS FIXES-->
                      <!--[if lte IE 7]>
                        <style>
                                  .dropcap {
                                   display: block;
                                    float: left;
                                    line-height: 180%;
                                    margin-top: -16px;
                                    margin-right: 1px;
                                    margin-bottom: -8px;

                                    }
                                </style>
                             <![endif]-->
   
   
   <style type="text/css">
      
      body, html {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: small;
      }

      
      #body {
      background: #fdeeb3;
      padding:0px;
      margin-top: auto;
      font-size: small;
      
      }
      
      
      #page_wrap {
      width: 670px;      
      margin: -15px auto;
      background: #fdeeb3;
      padding: 25px 0 25px 0;
      
         }
      
            #top {
            }
            
                  #title {
                  margin: 0px auto 15px;
                  overflow: none;
                  width: 519px;
                  height: 152px;
                  background: url(images/header.png) no-repeat;
                  
                  }
                  
                  #flash {
                  width: 100%;
                  background: #5b2912;
                  height: 125px;
                  border-top: 3px solid #9f6a28;
                  border-bottom: 3px solid #9f6a28;
                  margin: 5px auto 0 auto;
                  }
                  
            
            #bottom {
            width: 600px;
            margin: 15px auto;
         
            }
                  
                  #copy {

                  overflow: auto;
                  
                  }
                  
                  .heading {
                  
                  width: 80%;
                  margin: 20px auto -15px;
                  padding-bottom: 5px;
                  font-family: Georgia, "Times New Roman", Times, serif;
                  font-size: 150%;
                  color: #1b386d;
                  text-align: center;
                  border-bottom: 2px solid #1b386d;
                  
                  }
                  
                  .heading2 {
                  width: 80%;
                  margin: 50px auto -15px;
                  padding-bottom: 5px;
                  font-family: Georgia, "Times New Roman", Times, serif;
                  font-size: 150%;
                  color: #1b386d;
                  text-align: center;
                  border-bottom: 2px solid #1b386d;
                  
                  }
                  
                  .subhead {
                  
                  font-size: 75%;
                  }
                  
                  .dropcap {

                  font-family: Georgia, "Times New Roman", Times, serif;
                  font-size: 200%;
                  color: #5b2912;
                  
                  }
                  
                  
                  ul {
                  
                  list-style:none; margin:0 0 0; padding:0 0 0;
                  margin: 30px auto -10px;
                  width: 90%;
                  
                  }
                  
                  ul li {
                  background:url(images/bullet.png) no-repeat left center; padding-left:40px; margin-bottom:10px;
                  }
                  
                  ul, p {
                  line-height: 1.25em;
                  }
                  
                  p {
                  text-indent: 20px;
                  line-height: 1.3em;
                  
                  }
                  
                  .first {
                  text-indent: 0px;
                  }
                  
                  blockquote {
                  width: 80%;
                  margin: 0 auto;
                  font-style: italic;
                  }
                  
                  a:hover #sdm_75, a:visited #sdm_75 {
                  color: white;
                  }
                  
                  a:hover #sdm_75 {
                  background:url(images/75thseal_light.png) no-repeat top center; ;
                  }
                  
                  #75 {float: right; margin: 0; padding: 0;}
                  
                                 
                  #sdm_75 {
                  background:url(images/75thseal.png) no-repeat top center; ;
                  float: right;
                  width: 200px;
                  height: 20px;
                  margin: 0px 0px 15px 10px;
                  padding-top: 200px;
                  font-family: Verdana, Arial, Helvetica, sans-serif;
                  color: #000000;
                  font-size: 80%;
                  text-align: center;
                  }
                  
                  
                  
                  .right_pic {
                  border: thin solid black;
                  float: right;
                  margin: 10px 0px 5px 10px;
                  }
                  
                  .left_pic {
                  border: thin solid black;
                  float: left;
                  margin: 10px 10px 5px 0px;
                  }
                  
                  .left_flash {
                  border: 1px solid black;
                  float: left;
                  height: 120px;
                  width: 100px;
                  margin: 0px 5px 0px 0px;
                  }
                  
                  .right_flash {
                  border: 1px solid black;
                  float: right;
                  height: 120px;
                  width: 100px;
                  margin: 10px 0px 5px 10px;
                  }
                  
                  .footnote {
                  font-size: 70%;
                  }
                  
                  #fade_bottom {
                  z-index: 99;
                  position: fixed;
                  height: 44px;
                  width: 100%;
                  bottom: 0%;
                  background-image: url(images/fader_bottom.png) repeat-x;
                  }
                  
                  

      

      
      
   </style>

                  
</head>

<body id="home">
   
   <div id = "page_wrap">
 


       <div id="top">
        <div id = "title"></div>
         
            <div id="flash">   </div>
           
        </div>

               <div id="bottom">
               
                             <div id="copy">
                             



<p class="first"><span class="dropcap">M</span>any of you have expressed the wish to know more about Sri Daya Mata, president and sanghamata(Mother of the Society) of SRF/YSS. We often receive inquiries as to:<div class="left_flash"></div> "How <a class="75" href="http://www.yahoo.com"><div id="sdm_75">Read More</div></a> is she? Does she make public appearances or conduct classes that I might attend? Where does she spend her time, and what do her activities consist of?"

We are happy to share with you a few glimpses into her daily routine, as well as some news of her recent activities.</p>

<p>When Self-Realization Fellowship members are initiated into Kriya Yoga they become disciples of the line of SRF gurus.
  </p>
    
.....etc.....

**gwmbox** · 09-25-2008, 10:14 AM

I have not tested it but with a quick look it might be because the flash div is inside of the first paragraph and not the second, try moving it out of the first paragraph.

Cheers

Thread: Why does this small floated div shift my paragraph?

Thread Tools

Search Thread

Why does this small floated div shift my paragraph?

Bookmarks

Bookmarks

Posting Permissions