user3051460 user3051460 - 4 months ago 8
CSS Question

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

I am making a list that is similar as the sample

enter image description here

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
enter image description here

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;
}

Answer

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>

Comments