Two columns of <div> top aligned

MargeS · 05-06-2011 02:50PM #1

I've been trying to do this for ages now and I can't figure out a way to do it.
(I have a style in an xsl file that is formatting data in a CQWP in SharePoint.)

This is the problem: div vs table. I want the row of divs to be top aligned the way the table <td>'s are. I can only put one div into my xsl file as it gets replicated for each piece of data returned in the CQWP. Any ideas?

06-06-2011 12:29AM

tl;dr

but maybe http://masonry.desandro.com/ ?

desaparecidos · 06-06-2011 01:13AM

Deleted User wrote: »

tl;dr

It's not that long.

You're going to have to wrap each "row" of divs for them to "top aligned" like table cells.

A table row:

<tr>
	<td>Fill with content</td>
	<td>Fill with more content</td>
</tr>

Same effect with divs

<style>
div.cell{float:left}
div.clear{clear:both}
</style>
<div class="wrap">
	<div class="cell">content</div>
	<div class="cell">content</div>
	<div class="clear"></div>
</div>

Of course if the data you are presenting makes sense in a table, use a table.

mewso · 09-06-2011 10:30AM

We don't need to go charging to a div every time though do we

A simple <br class="clear" /> between them and give the clear class a clear:both; setting in css to force a new line. Use a div wrapper if the divs within have some kind of semantic meaning as a group. Please tell me folks that you don't still wrap your ul menu with a <div id="nav"> or something equally pointless.

Two columns of <div> top aligned

Welcome!

Comments

Welcome!