Having trouble trying to auto-align a list

HTML & CSS
1

Here’s a picture of what I’m trying to do. Right now I have two lists, the first one contains the top 3 boxes and the second one contains the bottom 3. I want to align it so box 4 would stay where it is but boxes 5 and 6 would jump up to underneath 2 and 3. If I try to put all 6 boxes in one list, it aligns box 4 under box 2, box 5 under box 3, and then box 6 under 4 (all still to the right of the big first box).

Is doing this possible with just html and css? I don’t want to have to dive into js.

2

Can you fix the broken image (nm, corporate web blocker is blocking it from you, your image url is likely valid) in your post and maybe post your HTML output and CSS in http://jsfiddle.net so we can see it?

3

No its not possible with CSS alone I’m afraid (using your current structure) unless you add negative top margins to the two last list items and drag them back up. There is no automatic way to do it. Once you add a “clear” to the floated element then all the other elements start level with that cleared element.

You could do it if items 1 and 4 were in a floated column of their own and then items 2,3,5,6 were in a separate floated column.

4

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.

5

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.


<!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 :slight_smile: