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:
What I want to do is this:
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.