How to create border for li element in my case?

Question

I am trying to create a div with bunch of element

<div id='wrapper'>
    <div id='col1'>
        <ul>
            <li>
                <a href=''>col-1</a>
            </li>

        </ul>
    </div>

    <div id='col2'>
        <ul>
            <li>
                <a href=''>col -2</a>
            </li>
        </ul>
    </div>

    <div id='col3'>
        <ul>
            <li>
                row 1
            </li>
            <li>
                row 2
            </li>
            <li>
                row 3
            </li>
            <li>
                row 4
            </li>
        </ul>
    </div>
</div>

CSS

#wrapper {
    position: absolute;
    background-color: #DEEFC5;
    top: 88px;
    left: 55px;
}

#wrapper li{
    width: 120px;
    height: 50px;
    padding-top: 15px;
}

#col1{
    float: left;
}


#col2{
    float: left;
    border-left: dotted 2px grey;
    height: 100%;
}


#col3{
    float: left;
    border-left: dotted 2px grey;
}

Is there anyway that I can have the dotted border in col-2 show from top to bottom even I only have 1 <li> in the col-2 div?

Here is my jsfiddle http://jsfiddle.net/Mcq6u/7/

Thanks for the help

Answer 1

You can use display tables, but you'll have to use a media query to get it to wrap around at your desired break-point.

#wrapper {
    position: absolute;
    background-color: yellow;
    top: 88px;
    left: 55px;
    display: table;
}

#wrapper li{
    width: 120px;
    height: 50px;
    padding-top: 15px;
}

#col1{
    display: table-cell;
}


#col2{
    border-left: dotted 2px grey;
    height: 100%;
    display: table-cell;
}


#col3{
    border-left: dotted 2px grey;
    display: table-cell;
}

http://jsfiddle.net/Mcq6u/10/

Edit: Added Media Queries to achieve full desired results, and cleaned up the CSS.

http://jsfiddle.net/iancwoodward/Mcq6u/16/

Answer 2

Depending on what you're trying to achieve, you can get this effect by setting a height value on all the elements -- I used 100%. This equals out all the columns but causes the lines to go all the way down to the bottom of the viewport. You can prevent that from happening by changing the height of the wrapper to an actual pixel value, or if it will be nested, it's parent element.

    #wrapper {
        position: absolute;
        background-color: yellow;
        top: 88px;
        left: 55px;
        height: 100%;
    }

    #wrapper li{
        width: 120px;
        height: 50px;
        padding-top: 15px;
    }

    #col1{
        float: left;
    }


    #col2{
        float: left;
        border-left: dotted 2px grey;
        height: 100%;
    }


    #col3{
        float: left;
        border-left: dotted 2px grey;
        height: 100%;
    }

Answer 3

I am still trying to work out a css solution for you.

But you can also use jquery on document.ready like this:

$(document).ready(function() {
   $("#col2").height($("#col3").height()); 
});