CODEWITHSUNDEEP
htmlcss
user3051460
user3051460

Reputation: 1485

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

Upvotes: 2

Views: 2225

Answers (4)

user6615762
user6615762

Reputation:

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

Upvotes: 0

zsawaf
zsawaf

Reputation: 2001

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>

Upvotes: 4

Faraz Sh.
Faraz Sh.

Reputation: 377

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.

Upvotes: 0

adambwhitten
adambwhitten

Reputation: 116

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

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

Upvotes: 1

Related Questions