Floating elements with different heights in two columns

Is there a way to float a list of items with varying heights in two columns as displayed in the image below?

The numbers on the boxes shows the order of the items in the HTML markup.

Due to the nature of floats it’s not going to work like that.

Let’s say your floats were 200px wide and they were all floated left in a 400px wide parent. That would allow you to get them to display in the order of the markup.

In your image where you have float #6 hanging on #3, that would actually be float number #5 snagging on #3. Then float #6 would be dropping below #5 with a gap above #6.

The only way to do that with floats is to float two columns. But that will defeat your source order.

You call it lists? But I don’t see any <li> elements?

If you want something similar to the example you could do something like:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
html, body {
	margin: 0;
	padding: 0;	
}

#wrapper {
	width: 500px;
	margin: 100px auto o;
	overflow: hidden;	
}

.column {
	width: 245px;
	float: left;	
}

.left {
	margin-right: 10px;	
}

.box {
	width: 245px;
	height: 90px;
	margin-bottom: 5px;	
	background: #20ABFF
}

.box p {
	margin: 5px;
	font-size: 16px;
	font-weight: bold;
	color: #FFF	
}

.three {
	height: 150px;	
}

.four {
	height: 110px;	
}	


</style>
</head>

<body>
<div id="wrapper">

<div class="column left">

<div class="box"><p>1</p></div>
<div class="box three"><p>3</p></div>
<div class="box"><p>5</p></div>
</div>

<div class="column">
<div class="box"><p>2</p></div>
<div class="box four"><p>3</p></div>
<div class="box"><p>6</p></div>
</div>

</div>


</body>
</html>


@Rayzur: You described the exact behaviour I’m seeing in my tests. I’ve managed to flow one side (left or right) as the way I need. But having also read a few more posts of yours in related threads it looks impossible to achieve it with floats.

@donboe: In your example, the elements’ order is not what I need. Be it lists or any other element this is the order I need in the markup:

<element1><element2><element3><element4><element5><element6>

Edit:

Sample HTML, feel free to post your ideas :slight_smile:


<html>
<head>
	<style>
		.box {background:#20abff; color:#fff; width:100px; margin: 0 0 5px 0;}
		.left {float:left;}
		.right {float:right;}
		.container {width:205px;}
	</style>
</head>
<body>

<div class="container">
	<div class="box left" style="height:60px;">1</div>
	<div class="box right" style="height:80px;">2</div>
	<div class="box left" style="height:60px;">3</div>
	<div class="box right" style="height:60px;">4</div>
	<div class="box left" style="height:60px;">5</div>
	<div class="box right" style="height:60px;">6</div>
</div>

</body>
</html>

If you knew what the heights were on each of these blocks you could pull it off with some negative margins and inline-blocks. I’m sure that is not what you are after though but you might find this interesting just the same. :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Inline-Block Test</title>

<style type="text/css">

.nav  {
    width:400px;
    display:table; 
    margin:50px auto;
    padding:5px;
    list-style:none;
    background:#333;
    word-spacing:-1em; 
}

.nav li {
    width:190px;
    display:inline-block;
    vertical-align:top;
    margin:5px;
    color:#FFF;
    word-spacing:0;
}
.a {
    height:150px;
    background:red;
}
.b {
    height:200px;
    background:blue;
}
.c {
    height:150px;
    background:green;
}
.d {
    height:150px;
    background:orange;
}
.nav li.neg {margin-top:-45px;}
</style>

</head>
<body>

<ul class="nav">
    <li class="a">one</li>
    <li class="b">two</li>
    <li class="c neg">three</li>
    <li class="d">four</li>
    <li class="b neg">five</li>
    <li class="a">six</li>
</ul>    

</body>
</html>

This looks nice, but you’re right I do not know the exact height. Well, kind of…

Each box layout is almost identical in the actual layout, except the title height (a header element). If a title is long enough to wrap into a second line for instance, it changes the height of the box.

There are a few other solutions to this (relying on letter arithmetic, or 1,3,5 - 2,4,6 even-odd approach as donboe demonstrated) but I just hoped that it could flow smoothly with a few floats :frowning: