Divs side by side without floats or position:absolute

Question

I'm trying to find a way to place divs side by side without using floats or position:absolute. The divs will have a set width, and may have floated elements inside of them. This is for a CMS where the user will be able to drag content elements to organize them. They do not have to be divs, I just don't know of any other type of HTML tag that would work better.

Basically the end result is for a CMS in which the user can organize content elements by dragging them. Unfortunately with floats, if you want to do anything that involves putting divs underneath each other, everything will go down to below the tallest div above it, even if it could fit underneath something else. i.e. 3 elements, 2 of which should be stacked on the left with a third one on the right that has a height somewhere in between the two.

Inline-block is out as it isn't supported by IE (although I'd love to be a dick and just have chrome frame required...) and doesn't work for this purpose anyway.

Answer 1

I'm a little confused that you mention dragging elements, but your title states you do not want to use position:absolute as a solution... most scripts I am aware of use that for the dragging process, so why would you not use it for the positioning of it to place them side-by-side?

Answer 2

The only option I can think of that doesn't use the techniques you've mentioned (position:absolute, display: inline-block, and float) is to use a table.

<table>
    <tr>
        <td><div id="div1">...content...</div></td>
        <td><div id="div2">...content...</div></td>
    </tr>
</table>

It's possible that you could use:

<div id="container">
    <div id="div1">...content...</div>
    <div id="div2">...content...</div>
</div>

with css:

#container {display: table; } /* you might need another child div with 'display: table-row' but I can't remember off-hand */
#div1 {display: table-cell; width: 50%; /* other css */}
#div2 {display: table-cell; /* width: 50%; other css */}

This is the best I can think of, and I dislike using tables for non-tabular purposes. But to each their own. =/

Answer 3

Are you just looking for a way to drag/drop and organize content? Have you seen JQuery UI's "Sortable"?

http://jqueryui.com/demos/sortable/

Answer 4

Do you have fixed number of columns ie elements horizontally arranged side by side ? If yes one thing i can think of is having those many floated unordered lists and each element will be an li When an element is dragged and dropped inside the same ul, its index in the ul is changed. When its dragged across uls,its removed from this list and appended to the other and arranged as in case 1. Just have an idea right now... will have to try it