Two columns using clear needs css guru

HTML & CSS
1

So i’ve arranged my articles into two columns this was:

article:nth-child(odd) {
float: right;
clear: right;
}
article:nth-child(even) {
float: left;
}

i have ten of them on each page and they all have different heights.

the problem is that some of the ‘even’ articles (floated lefft) are far from the article that is above them. like if they’d had a top property, except they dont… you can see what i’m talking about by looking here on the left column:
http://genshaft-oleg.com/oleggen/

2

Hi, oleggen. Welcome to the forums.

Do you want the boxes to be top aligned or do you want them to have the same height? or do you have something else in mind?

If you want them to be top aligned, then you can add {vertical-align:top} to .hentry:


.hentry {
    display: inline-block;
    [color=blue]vertical-align: top;[/color]
}
3

hey, I’ve tried vertical align but it won’t work.
after searching the web for many hours i think the best solution that i can do is:

div#main {  /*articles container*/
-webkit-column-count: 2;
}
.hentry { /*so it won't be cut in the middle by -webkit-column like regular text*/
display: inline-block;
}

it’s not perfect yet, but i’ll get there=]

btw the inspiration and what i’m aiming to is the WordPress theme below, excluded all the unnecessary java script
http://pixelgrade.com/demos/themes/?product=heap

4

It can’t be done with floats because as soon as you clear the item everything starts at that level and won’t rise up above a cleared element. You can only do it if you float whole columns and not individual items left and right.

The only way to do it is using column count as you found out but of course they are not left and right any more but go vertical and then wrap into another column as though you had floated two columns anyway but of course with the benefit of being automatic.

Here’s an example for anyone that’s watching :slight_smile:


<!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>
.wrap {
	width:500px;
	border:1px solid #000;
}
.wrap div {
	width:240px;
	border:1px solid #000;
	background:red;
	margin:0 0 20px;
}
.test1 { min-height:100px }
.test2 { min-height:120px }
.test3 { min-height:190px }
.test4 { min-height:120px }
.test5 { min-height:180px }
.test6 { min-height:110px }
.test7 { min-height:190px }
.test8 { min-height:80px }
.test9 { min-height:90px }
.test10 { min-height:100px }
.test11 { min-height:150px }
.test12 { min-height:110px }
.wrap{
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
}
</style>
</head>

<body>
<div class="wrap">
		<div class="test1 fl">1Lorem ispum</div>
		<div class="test2 fr">2Lorem ispum</div>
		<div class="test3 fl">3Lorem ispum</div>
		<div class="test4 fr">4Lorem ispum</div>
		<div class="test5 fl">5Lorem ispum</div>
		<div class="test6 fr">6Lorem ispum</div>
		<div class="test7 fl">7Lorem ispum</div>
		<div class="test8 fr">8Lorem ispum</div>
		<div class="test9 fl">9Lorem ispum</div>
		<div class="test10 fr">10Lorem ispum</div>
		<div class="test11 fl">11Lorem ispum</div>
		<div class="test12 fr">12Lorem ispum</div>
</div>
</body>
</html>