Can I achieve this two-column layout without parent DIVs for all the sub DIVs?

HTML & CSS
1

Hey all. I’m writing a page in C#/ASP.NET and the page outlines a list of clients that we’ve worked with. At the top of the page I have some DIVs which render 100% Wide of their container and that’s if the text of the client is greater than 400 characters. For the middle section of the page, if a clients description text is between 50 and 400, I want the rendering to be a side-by-side two-column layout. I wrote the C# code to set the Class to midPanel and fl_l/fl_r, based on the DIVs index within my data source.

.client_mid {width: 48%; margin: 0 10px 10px 10px; display: inline; }
.fl_l { float: left; }
.fl_r { float: right; }



<div id="midPanel_1" class="client_mid fl_l" >
	<h3>Title</h3>
	<hr />
	<p>Content removed for brevity...</p>
</div>
<div id="midPanel_2" class="client_mid fl_r" >
	<h3>Title</h3>
	<hr />
	<p>Content removed for brevity...</p>
</div>
<div id="midPanel_3" class="client_mid fl_l" >
	<h3>Title</h3>
	<hr />
	<p>Content removed for brevity...</p>
</div>
<div id="midPanel_4" class="client_mid fl_r" >
	<h3>Title</h3>
	<hr />
	<p>Content removed for brevity...</p>
</div>
<div id="midPanel_5" class="client_mid fl_l" >
	<h3>Title</h3>
	<hr />
	<p>Content removed for brevity...</p>
</div>

This would render this part of the page like the following:

800×600 2.31 KB

What I want to do is this:

800×292 1.59 KB

Realistically, the way the items are rendered in the page is largest to shortest so it’s unlikely that the left-most column will get all the 400 character items, making it much longer than the right column. Also, I don’t want to use JS/jQuery… that’s why I manipulate the CSS classes in C#. If nothing can be done then my last resort will be to have two DIVs that sit side-by-side, and I’ll push all my data into those two DIVs, which should achieve the same result. I’m just hoping there is a way to change the CSS to get the same effect with what I have now.

Thanks in advance for your time.

2

Hmmm … tricky. I can’t see any way to get the layout you want for arbitrary sized blocks. Once all the horizontal space has been used up, the next line will start below the base of the lowest block, you can’t go back and ‘fill in the gaps’.

To start with, I would try to avoid floating them left and right … you might end up with a situation where you had longer items in the even blocks than odd (or vice versa) so that the two sides of the page got out of sync. If you just float them all to the left then you can have it so that 1 and 2 are lined up, 3 and 4 are lined up, and so on.

An easier way to do it would be if you can switch the content round so that you have all the left column first and then all the right column, rather than trying to alternate between them.

3

As Stevie said above it is not possible to do what you want unless you just have two separate floated columns and stack content in each column. If the blocks were exactly the same height you could do it but you can’t have uneven block heights as floats will snag or just start underneath.

You could use inline-block but again each pair of elements will start on the same line and won’t backfill the space above.

I’ve tried many times to find a solution to this for one of my quizzes and although you can get close it always breaks at some stage.

4

Paul/Stevie - Thanks for the replies. I had a feeling that I was going to have to just drop items in two columns so I did exactly that. I created two DIVs that floated left (with the same size) and put my ListViews in them. Then, in my code I made sure to take every other item (since they were sorted by length) and push the data into either of the two columns… this way one column wouldn’t get too much longer than the other.