html entries horizontally, two across - line up evenly - html

Question

I have a large group of "li" elements (consisting of an image, and several lines of text) that resides in a content div. My "li" elements are going to vary in size (some have long links, some have long titles, etc)
I'd like two columns across when possible; I need to do responsive, so when I get to mobile I'll probably have one column across. I thought having a fixed size "li" would do the trick, but obviously not. Each time one of the titles or links is longer than the other, it throws off all the blocks.
Would using div's be better vice using "li" elements?
<div>
<img src="test.png" />
<h2>One - average title is here</h2>
<h3>Link is here and this might be long also</h3>
</div>
Is there a better way to do this without the fixed height for an "li"? And why does my first element always seem lower? I know this isn't rocket science, but I can't seem to come up with the fix.
jsfiddle

Answer 1

I believe the following layout is better:
(Try resizing your browser window less than 480px to view the mobile layout.)
*{
margin: 0px;
padding: 0px;
}
html, body{
width: 100%;
}
li{
width: 40%;
vertical-align: top;
}
#media screen and (max-width: 480px){
li{
width: 80%;
}
}
ul,li {
padding: 0;
margin: 0;
}
#links {
font-size: 0;
text-align: center;
}
#links li {
font-size: 12px;
display: inline-block;
border: 1px solid #000000;
padding: 2px;
background: #c0c0c0;
margin: 5px;
}
#links li h2 {
font-size: 1em;
}
<ul id="links">
<li>
<img src="test.png" />
<h2>One - average title is here</h2>
<h3>Link is here and this might be long also</h3>
</li>
<li>
<img src="test.png" />
<h2>Two - this title is here and is really, really long</h2>
<h3>Link is here </h3>
</li>
<li>
<img src="test.png" />
<h2>Threee -title is here</h2>
<h3>Link is here </h3>
</li>
<li>
<img src="test.png" />
<h2>Four - this title is here and is really, really long</h2>
<h3>Link is here </h3>
</li>
<li>
<img src="test.png" />
<h2>Five title is here</h2>
<h3>Link is here </h3>
</li>
<li>
<img src="test.png" />
<h2>Six title is here</h2>
<h3>Link is here and this area can be long also </h3>
</li>
</ul>
Updated jsFiddle Demo
Readup: CSS #media queries | MDN

Answer 2

Remove that fixed size and put float: left instead.
#links li {
font-size: 12px;
border: 1px solid #000000;
padding: 0;
background: #c0c0c0;
float: left; /*change here*/
margin: 2%; /*responsive margin*/
width: 45%; /*and width*/
}
Now clear the left side of each 2n + 1 div:
#links li:nth-child(2n + 1){
clear: left;
}
And add a media query:
#media screen and (max-width: 400px){
#links li {
margin: 2% 0;
width: 97%;
}
}
JSFIDDLE.