私はdivの下の行全体に及ぶhrを追加することができません

Question

ここに私のコードは、私は時間を追加することによって2 divsを分離したい、誰も私は全体に拡張されますhrを追加することができますイントロイントロ画像下の行、時間が唯一のイントロ映像まで延長されているので、誰でもHR-

#intro{ 
     font-family: 'Sansita', sans-serif; 
     font-size: 170%;  
     float: right;     
     width: 50%;     
     margin-right: 20px; 
     margin-left: 10px; 
      color: #ff471a ; 
     } 



     #introImage { 

      float: left; 
      width: 40%; 
      margin-left: 70px; 
      margin-top: 35px; 
      box-shadow: 10px 10px grey; 
      border-radius: 10px; 

     } 




    #hitchhiking-info { 

     margin-top: 20px; 
     width: 100%; 
     height: 100px; 
     text-align: center; 
     background-color: blue; 
     float: none; 

    } 

<div id="intro-div"> 

     <p id="intro"> Hello There! I have made this website to share my experiences of hitchhiking, which is my full time job. I want to inspire other hitchhikers as well and inspire people. This website will hopefully clear all your misconceptions about hitchhiking as a proffession, as it is underrated and critisized by people. However I have a very different perspective about hitchhiking, you will get to know about it through my website. This website is a mean I will be using to reach to people around the world. Fell free to comment any suggestions or feedback of my experiences and contact me for any query </p>  

     <img id="introImage" src="intro-image.jpg"> 




    </div> 

    <div id="hitchhiking-info"> 

     <h1 id="heading"> Hitchhiking </h1> 
    </div> 

Answer 1

に動作します：

#intro-div { 
    overflow: auto; 
} 

だけ浮いてelemenを含むすべてのコンテナtsの高さは0になります。これを避けるには、overflow: auto;またはoverflow: hiddenをCSSに追加する必要があります。

ここでの結果を参照してください：

http://codepen.io/anon/pen/MJzdda

Answer 2

で私を助けることができるように時間のタグを追加しますの間に あなたのdivのと、あなたのCSSファイルで、時間タグのCSS

hr { 
display: block; 
margin-top: 0.5em; 
margin-bottom: 0.5em; 
margin-left: auto; 
margin-right: auto; 
border-style: inset; 
border-width: 1px; 
} 

と遊ぶラインの長さを調整するためのマージン右マージン左のプロパティと遊びます。

Answer 3

JUST <hr/>を追加し、それが重要なことは、これを追加することです

<div id="intro-div"> 

     <p id="intro"> However I have a very different perspective about hitchhiking, you will get to know about it through my website. This website is a mean I will be using to reach to people around the world. Fell free to comment any suggestions or feedback of my experiences and contact me for any query </p>  

     <img id="introImage" src="intro-image.jpg"> 


<hr/> 

    </div> 

    <div id="hitchhiking-info"> 

     <h1 id="heading"> Hitchhiking </h1> 
    </div> 


    [1]: https://i.stack.imgur.com/wbY63.png