How to create a list with three columns in a row by css and html?

Question

I am making a list that is similar as the sample

I tried to make css code to build a list style as above. However, my output does not look like it. Could you help me to look at my css and html and help me to obtain it?

This is my current output

This is what I tried. You can see the online demo at here

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
        <div id="view"> 
                <div id="container">
                    <ul>
                        <!-- row 01 -->
                        <a href="#"><li class="clearfix">
                                <h2>Wordpress desiger</h2>
                                <p class="desc">Wordpress and beyond </p>  
                                <p class="location">NY.</p>
                                <p class="time">Jan.</p>
                                <span class="jobtype">Part time</span>
                        </li></a>

                        <!-- row 02 -->
                        <a href="#"><li class="clearfix">

                            <h2>CEO</h2>
                            <p class="desc">Think different</p>
                            <p class="location">Denver</p>
                            <p class="time">Feb.</p>
                            <span class="jobtype">Contract</span>
                        </li></a>

                        <!-- row 03 -->
                        <a href="#"><li class="clearfix">                            
                            <h2>Interactive desiger</h2>
                            <p class="desc">Designer.</p>  
                            <p class="location">NY.</p> 
                            <p class="time">May</p>
                            <span class="jobtype">Full time</span>
                        </li></a>

                    </ul>
                </div>
            </div>



</div>   
</body>
</html>

My CSS code is

body{
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    overflow-x: hidden;
}
body.is-ontop{
    margin-top: 53px;
}
h1{
    font-size: 44px;
}
h2{
    font-size: 20px;
}
h3{
    font-size: 18px;
}
a{
    color: #666;
}
a:hover{
    color: #ff3366;
    text-decoration: none;
    transition: all 0.25s;
}
a:focus{
    text-decoration: none;
}
.bold{
  font-weight: bold;
}  
a { text-decoration: none; }

/** content display **/
#view { display: block; padding: 0; margin: 0; height:600px;  overflow:hidden; overflow-y:scroll;}
#container { display: block; margin-top: 10px; }
#container ul { }
#container ul a li { 
    display: block;
    width: 100%;
    border-bottom: 1px solid #b9b9b9;
    border-top: 1px solid #f7f7f7;
    background: #FFF;

}

#container ul a { display: block; position: relative; width: 100%; }
#container ul li h2 { font-size: 2.1em; line-height: 1.3em; font-weight: normal; letter-spacing: -0.03em; padding-top: 4px; color: #55678d; }
#container ul li p.desc { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }
#container ul li p.location { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }
#container ul li p.time { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }
}#container ul li .jobtype { position: absolute; bottom: 0px; left: 0px; font-size: 1.2em; font-weight: bold; color: #6ea247; }  
#container ul a:hover li h2 { color: #7287b1; }
#container ul a:hover li p.desc { color: #757575; }    
#container ul a:hover li {
background: #E8EAEA;
}

Or, try bootstrap this will be better and responsive as well — Nitin Dhomse
– Nitin Dhomse, Commented Jul 21, 2016 at 16:01
@NitinDhomse: How can you use table or bootstrap to obtain my expected result? Could you show it in answer with code — user3051460
– user3051460, Commented Jul 21, 2016 at 17:28

zsawaf · Accepted Answer · 2016-07-21 17:15:14Z

4

Don't use tables. It's 2016. Also just a pointer, a tags are usually inside li tags.

ul a {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ul a .information {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

h2, .job-type {
  margin-top: 15px;
  margin-bottom: 0;
}

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
        <div id="view"> 
                <div id="container">
                    <ul>
                        <!-- row 01 -->
                        <a href="#"><li class="clearfix">
                                <h2>Wordpress desiger</h2>
                                <div class="information">
                                <p class="desc">Wordpress and beyond </p>  
                                <p class="location">NY.</p>
                                <p class="time">Jan.</p>
                                </div>
                                <span class="jobtype">Part time</span>
                        </li></a>

                        <!-- row 02 -->
                        <a href="#"><li class="clearfix">

                            <h2>CEO</h2>
                            <div class="information">
                            <p class="desc">Think different</p>
                            <p class="location">Denver</p>
                            <p class="time">Feb.</p>
                            </div>
                            <span class="jobtype">Contract</span>
                        </li></a>

                        <!-- row 03 -->
                        <a href="#"><li class="clearfix">                            
                            <h2>Interactive desiger</h2>
                            <div class="information">
                            <p class="desc">Designer.</p>  
                            <p class="location">NY.</p> 
                            <p class="time">May</p>
                            </div>
                            <span class="jobtype">Full time</span>
                        </li></a>

                    </ul>
                </div>
            </div>



</div>   
</body>
</html>

edited Jul 21, 2016 at 17:15

answered Jul 21, 2016 at 16:02

zsawaf

2,01117 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3051460 Over a year ago

Great. Is it possible to make the location and date in the center between top and bottom of a row?

zsawaf Over a year ago

Yep, you just have to fix the margins. I didn't apply any styles, I just showed you the basic layout. I updated the codepen to reflect the changes.

moeses Over a year ago

haha "it's 2016" lovely 😁 wish i could say that to our client

zsawaf Over a year ago

@moesphemie Dude tell me about it. Half of the time I can't use flex because clients are grandpas that still use IE9. Makes me want to kms.

moeses Over a year ago

haha don't lose hope. Found this polyfill some weeks ago: github.com/jonathantneal/flexibility - maybe it's something for you

adambwhitten · Accepted Answer · 2016-07-21 16:03:48Z

1

I personally like to use the Lemonade CSS grid, I think if you built it using this, it would a lot more easier to get the look your going for. It say prebuilt styles to help you accomplish it.

This might help you visualize the divs using lemonade.

Here is the link for lemonade http://lemonade.im/

answered Jul 21, 2016 at 16:03

adambwhitten

1162 silver badges15 bronze badges

Comments

Faraz Sh. · Accepted Answer · 2016-07-21 16:17:03Z

0

You can use display:inline for the li's:

ul.inline-list {width:100%;}

ul.inline-list li {display:inline; width:33%;}

then assign class="inline-list" to the ul.

answered Jul 21, 2016 at 16:17

Faraz Sh.

3772 silver badges8 bronze badges

Comments

score 0 · Accepted Answer · 2017-09-16 04:49:49Z

0

Try to simulate de comportament of the tag table, or you can use display flex to make your grid more flexible Ex:

<ul>
    <li class="row">
        <a href="#">

            <div class="td function">
                <h2>Wordpress desiger</h2>
                <p class="desc">Wordpress and beyond </p>
                <span class="jobtype">Part time</span>
            </div>

            <div class="td location">
                <p>NY.</p>
            </div>

            <div class="td time">
                <p class="time">Jan.</p>
            </div>

        </a>
    </li>
</ul>

CSS ex:

.row a{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.td{
  padding: 5px;
}

.function{
  width: 60%;
}
.location,.time{
  width: 20%;
}

edited Sep 16, 2017 at 4:49

answered Jul 21, 2016 at 16:12

user6615762

Collectives™ on Stack Overflow

How to create a list with three columns in a row by css and html?

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related