how to add vertical line between two divs

Create a new div between your two div and add this class:

.vertical-row {
 Float:left;
 height:100px;
 width:1px; /* edit this if you want */
 background-color: your color
} 

You can use <hr>, as it is semantically correct, and then use CSS to convert it to a vertical line.

hr.vertical {
    height:100%; /* you might need some positioning for this to work, see other questions about 100% height */
    width:0;
    border:1px solid black;
}

You can also use pseudo elements to make a vertical separator. You don't need an extra div to make a separator just use the pseudo elements and style it according to your needs.

#wrapper_1 {
  background-color: pink;
  height: 100px;
  float: left;
  width: 100px;
}
#wrapper_1:after {
  content: "";
  background-color: #000;
  position: absolute;
  width: 5px;
  height: 100px;
  top: 10px;
  left: 50%;
  display: block;
}
#wrapper_2 {
  background-color: brown;
  height: 100px;
  width: 100px;
  float: right;
}

<div id="wrapper_1">
  Creating slideshows PHP
</div>

<div id="wrapper_2">
  Creating slideshows with WordPress
</div>

PS: Beware of the absolute positioning of the pseudo elements. Thanks.

I am not a css hacker but this is how would I do it.. Please notice that you should use clear: both; after floating elements.

HTML:

<div class="container">

  <div id="wrapper_1">
      Creating slideshows PHP
  </div> 

  <div class="seperator"></div>

  <div id="wrapper_2">
      Creating slideshows with WordPress 
  </div>

  <div class="clearfix"></div>

</div>

CSS:

#wrapper_1 {
    background-color:pink;
    height:100px;
    float:left;
    width: 100px;
}

#wrapper_2 {
    background-color:brown;
    height:100px;
    width: 100px;
    float:right;
}

.seperator {
  height: 100%;
  width: 1px;
  background: black;
  top: 0;
  bottom: 0;
  position: absolute;
  left: 50%;
}

.container {
  position: relative;
}

.clearfix {
  clear: both;
}

DEMO: jsfiddle