Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

Two columns of <div> top aligned

  • 05-06-2011 02:50PM
    #1
    MargeS
    Registered Users, Registered Users 2 Posts: 1,000 ✭✭✭


    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?
    Table-vs-Div.jpg


Comments

  • #2
    [Deleted User]
    Posts: 793 ✭✭✭ [Deleted User]


    tl;dr

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


  • #3
    desaparecidos
    Banned (with Prison Access) Posts: 1,332 ✭✭✭desaparecidos


    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.


  • #4
    mewso
    Moderators, Science, Health & Environment Moderators Posts: 9,206 Mod ✭✭✭✭mewso


    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.


Advertisement