I would like the first and second divs to have a full height border on their right side while floating left.
CSS:
div.wrapper {
border: 1px solid black;
}
div.wrapper > div {
text-align: center;
width: 50px;
padding-left: 5px;
float: left;
}
div.w-1, div.w-2 {
border-right: 1px solid black;
}
HTML:
<div class='wrapper'>
<div class='w-1'>
<p>text</p>
</div>
<div class='w-2'>
<p>text</p>
<p>text</p>
</div>
<div class='w-3'>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
<br style='clear: both;'>
</div>
Any help with a solution would be greatly appreciated. Here is the corresponding jsfiddle http://jsfiddle.net/kto5pupz/