CSS <li> tag styling

Question

I'm trying to get my list tags to be displayed 2x2 per line thus far I am using margins to in order to position them correctly how I want. Theres got to be a simpler way to do this without the use of margins?

Below is the code that I have used and a jsfiddle which shows what I've got so far, to be fair I'm happy with how its styled just not happy with the way I've coded the style. I can't help but think that theres a simpler way to do it.

JS fiddle: http://jsfiddle.net/tNQE3/

<section id="maincontent">
<div id="wrap">
    <ul>
<li id="games" class="nav"><a href="#">Games</a></li>
    <li id="music" class="nav"><a href="#">Music</a></li>
    <li id="movies" class="nav"><a href="#">Movies</a></li>
    <li id="tv" class="nav"><a href="#">TV</a></li>  
    <li id="sport" class="nav"><a href="#">Sport</a></li>      
    </ul>
</div>
</section>

#wrap ul {
padding:40px 40px 40px 100px;   
}

#wrap li {
border: 1px solid #333333;
border-radius: 15px;
height:200px;
width:300px;
background:#ebebeb;
padding: 10px 0px 0px 20px;
text-align:center;
}

#wrap li#games {
 margin: 0px 0px 0px 30px;
 background-image:url(../img/controller.png);
 background-size: 30px 30px;
 background-repeat:no-repeat;
 background-position: 80px;
 padding: 10px 0 0 34px; 
}


#wrap li#music {
margin: -210px 0px 0px 400px;
 background-image:url(../img/music.png);
 background-position: 80px;
 background-size: 30px 30px;
 background-repeat:no-repeat;  
padding: 10px 0 0 34px;
}

#wrap li#movies {
background-image:url(../img/video.png);
 background-size: 30px 30px;
 background-position: 80px;
 background-repeat:no-repeat;  
padding: 10px 0 0 34px;
margin: 20px 0px 0px 30px;
}

#wrap li#tv {
 background-image:url(../img/tv.png);
 background-size: 30px 30px;
 background-position: 80px;
 background-repeat:no-repeat;  
padding: 10px 0 0 34px;
margin: -210px 0px 0px 400px;
}

#wrap li#sport {
background-image:url(../img/sport.png);
 background-size: 30px 30px;
 background-position: 80px;
 background-repeat:no-repeat;  
padding: 10px 0 0 34px;
margin: 20px 0px 0px 30px;

}

Answer 1

The columns property does exactly what you want, without the need to modify your markup. Just add in margins as needed on the li:

http://jsfiddle.net/tNQE3/16/

#wrap ul {
    padding:40px 40px 40px 100px;
    -webkit-columns: 320px;
    -moz-columns: 320px;
    columns: 320px;
}

#wrap li {
    border: 1px solid #333333;
    border-radius: 15px;
    height:200px;
    width:300px;
    background:#ebebeb;
    padding: 10px 0px 0px 20px;
    text-align:center;
    background-size: 30px 30px;
    background-position: 80px;
    background-repeat:no-repeat;  
    padding: 10px 0 0 34px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

#wrap li#games {
    background-image:url(../img/controller.png);
}


#wrap li#music {
     background-image:url(../img/music.png);
}

#wrap li#movies {
    background-image:url(../img/video.png);
}

#wrap li#tv {
    background-image:url(../img/tv.png);
}

#wrap li#sport {
    background-image:url(../img/sport.png);
}

http://caniuse.com/#feat=multicolumn

Answer 2

You can use the nth-child pseudo selector to position two on each line.

ul li:nth-child(2n+3) {
   clear:both;
}

This selector will only target the 3rd, 5th, 7th, 9th, etc.. ul li elements.

Here's a fiddle: http://jsfiddle.net/8gN8U/1/

Answer 3

Set display: inline-block to the li, and specify a width to the ul.

http://jsfiddle.net/65YuK/

ul {
    width: 650px;
}

ul li {
    border: 1px solid #333333;
    border-radius: 15px;
    height: 200px;
    width: 300px;
    background: #ebebeb;
    text-align:center;
    display: inline-block;
    margin: 10px 10px;
}

Answer 4

How about this? http://jsfiddle.net/briggs_w/tNQE3/14/

I removed all the margin references from the styles for individual lines, and put

margin-left:30px;
margin-right:20px;

into the style for li. Then moved all the commonalities from the individual line styles to the style for li.

(Right: you shouldn't have to specify how those margins work out individually for each line.)

I would further move the background-image from the style to the individual line, possibly in a div, because I don't think that really belongs in the style file, but you wouldn't have to.

Answer 5

Create a container with a width and then float the li's

http://jsfiddle.net/wVmZc/

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


div {
    width: 450px;
    border: 1px solid red;
    overflow: hidden;   
}
ul {
    list-style: none;
}
li {
    float: left;
    width: 150px;
    height: 100px;
    border: 1px solid lime;
}

Answer 6

I would go about it like this:

http://jsfiddle.net/tNQE3/12/

First off, UL is probably not the best choice for the layout you are shooting for. I would make a simple div grid instead and style the cells up similar to what you had for the LIs.

Next, eliminate the overuse of IDs and instead use classes to target like elements instead of targeting each element separately.

HTML:

        <div class="row">
            <div class="col">
                <a href="#">Games</a>
            </div>
            <div class="col">
                <a href="#">Music</a>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <a href="#">Movies</a>
            </div>
            <div class="col">
                <a href="#">Tv</a>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <a href="#">Sport</a>
            </div>
        </div>

    </div>
</section>

CSS:

   #wrap {
        padding:40px 40px 40px 100px;   
    }

    .row { width:6400px; overflow:hidden; margin:0 0 20px 0; }
    .col {   
        width:300px;
        height:200px;
        margin:0 20px 0 0; 
        padding: 10px;

        float:left; 

        border: 1px solid #333333;
        border-radius: 15px;

        text-align:center;

        background:#ebebeb url(../img/controller.png) no-repeat;
    }
    .col:last-child { margin:0; }