How to set border for my li element in my case

Question

I am trying to create a 3 columns div.

I want my second column in my example to show a dotted border all the way to the bottom.

#wrapper {
   
    background-color: yellow;
    top: 88px;
    left: 55px;

}

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

#col1{
    display: table-cell;
}


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


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

 <div id='wrapper'>
     <div class="row">
        <div id='col1' class="col-xs-4">
            <ul>
                <li>
                    <a href=''>col-1</a>
                </li>

            </ul>
        </div>

        <div id='col2' class="col-xs-4">
            <ul>
                <li>
                    <a href=''>col -2</a>
                </li>
            </ul>
        </div>

        <div id='col3' class="col-xs-4">
            <ul>
                <li>
                    row 1
                </li>
                <li>
                    row 2
                </li>
                <li>
                    row 3
                </li>
                <li>
                    row 4
                </li>
            </ul>
        </div>
     </div>
 </div>

JSFiddle http://jsfiddle.net/Mcq6u/17/

How can I do this? Thanks so much!

@MelanciaUK html, body, .row, #wrapper { height: 100%; } will stretch the #wrapper to the full page height, it doesn't seem that it is intended to be so. — Arbel, Sep 24 '14 at 21:57
@Arbel I've just noticed that. I'm tweaking it, but the idea is the same. — emerson.marini, Sep 24 '14 at 21:58
you're not really making a 3 col layout correctly, so I'd recommend fixing your design & then it'll be easier to work on, follow: http://stackoverflow.com/questions/20566660/3-column-layout-html-css. Then just add border-right or border-left to the example along w the rest of your customization & that should get you what you want. — RandomUs1r, Sep 24 '14 at 22:05
@RandomUs1r not sure what is wrong with my layout. I need the responsive design so I need to follow bootstrap design layout — FlyingCat, Sep 24 '14 at 22:09
Oh, missed the bootstrap classes completely, in that case, try setting min-height: 100% & height: 100% on your li lags. — RandomUs1r, Sep 24 '14 at 22:17
Based on this: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height You would achieve this: http://jsfiddle.net/Mcq6u/24/ — emerson.marini, Sep 24 '14 at 22:21
There is another question that might be related: http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — emerson.marini, Sep 24 '14 at 22:25
I just posted a quick solution. Let me know if it was what you were after. Thank you :) — Alessandro Incarnati, Sep 24 '14 at 22:43

score 2 · Accepted Answer · answered Sep 24 '14 at 22:42

2

You can simply add:

    .row{ 
         display:table-row;
    }

   .col-xs-4 {  
        display: table-cell;
        float: none; 
    }

JSFIDDLE: http://jsfiddle.net/Mcq6u/29/

answered Sep 24 '14 at 22:42

Alessandro Incarnati

7,018
3
38
54

Right to the point. Can't upvote (daily voting threshold reached) but would do for sure. – emerson.marini Sep 24 '14 at 22:47
Sorry dude. I'm not the OP. I was just around and curious about a quick solution. – emerson.marini Sep 24 '14 at 22:49
I know, I noticed you were commenting around. I do the same sometimes, just read random questions. :) – Alessandro Incarnati Sep 24 '14 at 22:50

programmingaddict · Answer 2 · 2014-09-24T22:27:14.590

You can define a specific height to the columns. See this new code:

CSS:

#wrapper {
    background-color: yellow;
    top: 88px;
    left: 55px;
    height: 100%;  
    width: 100%;   
}
#wrapper li {
    width: 120px;
    height: 50px;
    padding-top: 15px;
    height: 100%;   
}
.row .col-xs-4 {
    height: 200px;
    width: 33%;
}
#col1 {
}
#col2{
    border-left: dotted 2px grey;
}
#col3 {
    border-left: dotted 2px grey; 
}

HTML:

<div id="wrapper">
     <div class="row">
        <div id="col1" class="col-xs-4">
            <ul>
                <li>
                    <a href="#">col-1</a>
                </li>

            </ul>
        </div>

        <div id="col2" class="col-xs-4">
            <ul>
                <li>
                    <a href="#">col-2</a>
                </li>
            </ul>
        </div>

        <div id="col3" class="col-xs-4">
            <ul>
                <li>row 1</li>
                <li>row 2</li>
                <li>row 3</li>
                <li>row 4</li>
            </ul>
        </div>
     </div>
    </div>

http://jsfiddle.net/Mcq6u/26/

score 0 · Answer 3 · answered Sep 24 '14 at 22:24

why are you wrapping you content in ul and li? (if you want dots you can just use a before pseudoelement)

using bootstrap's specific classes for rows and columns (like you're doing) you could just use css:

   .col-xs-4 {
   border-left: dotted 2px grey;
   height: 100%;}
   .col-xs-4:first-child {border: none}

score 0 · Answer 4 · answered Sep 25 '14 at 07:33

0

you can simply use css display:table to the container div and display:table-cell to your content divs

See the Fiddle Demo

answered Sep 25 '14 at 07:33

Aru

1,840
1
12
15

How to set border for my li element in my case

4 Answers4