отображение вертикальной линии в css

Question

Я хочу отобразить вертикальную линию в теге div. Я имею тег div и назвал его как отдых. Внутри этого у меня есть два тега div (sidemenu), один для бокового меню. Я отметил его как «см» и хочу нарисовать линию, которую я нарисовал зеленым между двумя тегами div, а мой второй div - content.My проблема теперь hr тег отображается как точка.

.outer{ 
 
     margin-left:20%; 
 
     margin-top:.5cm; 
 
     margin-bottom:.5cm; 
 
     height:750px; 
 
     width:60%; 
 
     box-shadow: 10px 10px 5px #888888; 
 
\t border:1px solid #f9f2f2; 
 
\t border-radius: 10px; 
 
    } 
 
.log{ 
 
    width:100%; 
 
    height:50px; 
 
    border:1px solid #f9f2f2; 
 
    border-radius: 10px; 
 
    background:-o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%); \t background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff)); 
 
\t background:-moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%); 
 
\t filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff"); \t background: -o-linear-gradient(top,#e5e3e3,ffffff); 
 

 
\t background-color:#e5e3e3; 
 
\t border:0px solid #f9f2f2; 
 
\t text-align:left; 
 
\t border-width:0px 0px 1px 1px; 
 
} 
 
.rest{ 
 
height:685px; 
 
background:-o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%); \t background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff)); 
 
\t background:-moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%); 
 
\t filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff"); \t background: -o-linear-gradient(top,#e5e3e3,ffffff); 
 

 
\t background-color:#e5e3e3; 
 

 
\t border:1px solid #f9f2f2; 
 
\t border-width:0px 0px 0px 0px; 
 
\t border-radius: 0px 0px 10px 10px; 
 
\t text-align:left; 
 
\t padding:7px; 
 
} 
 
.sidemenu{ 
 
float:left; 
 
margin-top:150px; 
 
    height:250px; 
 
    width:150px; 
 
     
 
\t border:1px solid #f9f2f2; 
 
\t border-radius: 10px; 
 
} 
 
.content{ 
 
border-left: thick solid #f9f2f2; 
 
} 
 
hr{ 
 
margin:0; 
 
width:1px; 
 
height:685px; 
 
}

<div class="outer"> 
 
       <div class="log"> 
 
       
 
       </div> <!--End of log div --> 
 
       <div class="rest"> 
 
        <div class="sidemenu"> 
 
         <div class="menu 1"> 
 
         </div> <!--End of menu1 --> 
 
         <div class="menu 2"> 
 
         </div> <!--End of menu 2--> 
 
         <div class="menu 3"> 
 
         </div> <!--End of menu 3--> 
 
         <div class="menu 4"> 
 
         </div> <!--End of menu 4--> 
 
        </div> <!--End of side menu --> 
 
        <hr > 
 
        <div class="content"> 
 
        </div> <!--End of content --> 
 
       </div> <!--End of rest div --> 
 
      </div> <!--End of outer div-->

Answer 1

.outer { 
 
    margin-left: 20%; 
 
    margin-top: .5cm; 
 
    margin-bottom: .5cm; 
 
    height: 737px; 
 
    width: 60%; 
 
    box-shadow: 10px 10px 5px #888888; 
 
    border: 1px solid #f9f2f2; 
 
    border-radius: 10px; 
 
} 
 
.log { 
 
    width: 100%; 
 
    height: 50px; 
 
    border: 1px solid #f9f2f2; 
 
    border-radius: 10px; 
 
    background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff)); 
 
    background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff"); 
 
    background: -o-linear-gradient(top, #e5e3e3, ffffff); 
 
    background-color: #e5e3e3; 
 
    border: 0px solid #f9f2f2; 
 
    text-align: left; 
 
    border-width: 0px 0px 1px 1px; 
 
} 
 
.rest { 
 
    height: 685px; 
 
    background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff)); 
 
    background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff"); 
 
    background: -o-linear-gradient(top, #e5e3e3, ffffff); 
 
    background-color: #e5e3e3; 
 
    border: 1px solid #f9f2f2; 
 
    border-width: 0px 0px 0px 0px; 
 
    border-radius: 0px 0px 10px 10px; 
 
    text-align: left; 
 
    padding: 0px 7px; 
 
} 
 
.sidemenu { 
 
    float: left; 
 
    margin-top: 150px; 
 
    height: 250px; 
 
    width: 150px; 
 
    border: 1px solid #f9f2f2; 
 
    border-radius: 10px; 
 
} 
 
.content { 
 
    border-left: thick solid #f9f2f2; 
 
} 
 
hr { 
 
    margin: 0; 
 
    width: 1px; 
 
    height: 685px; 
 
    background:red; 
 
}

<div class="outer"> 
 
    <div class="log"> 
 

 
    </div> 
 
    <!--End of log div --> 
 
    <div class="rest"> 
 
    <div class="sidemenu"> 
 
     <div class="menu 1"> 
 
     </div> 
 
     <!--End of menu1 --> 
 
     <div class="menu 2"> 
 
     </div> 
 
     <!--End of menu 2--> 
 
     <div class="menu 3"> 
 
     </div> 
 
     <!--End of menu 3--> 
 
     <div class="menu 4"> 
 
     </div> 
 
     <!--End of menu 4--> 
 
    </div> 
 
    <!--End of side menu --> 
 
    <hr> 
 
    <div class="content"> 
 
    </div> 
 
    <!--End of content --> 
 
    </div> 
 
    <!--End of rest div --> 
 
</div> 
 
<!--End of outer div-->