Originally Posted by
sixers2329
Ah ok I solved it. I made 3 separate lists, one for each column. Each element's width doesn't change only its height so the first list contains 1 and 4, the second 2 and 5, and the third 3 and 6. Float each of them left and boom. Thanks.
Yes that's the best way to do it as you can't really float multiple elements left and right and let them form columns without gaps.
Just for interests sake here is a method that does what you asked for using the original structure but is too convoluted for real use.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap { width:616px; }
ul {
margin:0;
padding:0;
list-style:none;
}
li {
width:200px;
background:green;
border:1px solid gold;
float:left;
}
li:first-child { clear:left }
ul+ul li {
display:inline-block;
float:none;
margin-right:-4px;
}
ul+ul li:first-child { float:left;margin:0; }
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>1 test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </li>
<li>2 test test </li>
<li>3 test test </li>
</ul>
<ul>
<li>4 test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </li>
<li>5 test test </li>
<li>6 test test </li>
</ul>
</div>
</body>
</html>
I should have saved it for a quiz 
Reply With Quote
Bookmarks