Question

I’ve got a few divs (multi-column page) with “display: inline-block” set. Shouldn’t this prevent them from wrapping? I want them all side by side:

div.LabelColumn
{
    display: inline-block;
    padding: 10px 0 0 40px;
    vertical-align: top;
}

div.DataColumn
{
    display: inline-block;
    padding: 10px 0 0 5px;
    vertical-align: top;
}

To clarify, I want the DIVs side by side – i.e., shown as columns. I want them each to take up as much room as they need. Each of them, using what I want to display, should only take up about 100px, so there is easily enough room to display a few columns side by side. The first column will have a label, the second a bit of data, the third a label, and the fourth a bit of data.

To give a higher level view of the page, I have a div which I am floating left. To its right, I want the multiple columns of data. By the way, this is working in Chrome, but not in IE.

I would like the width to automatically adjust to be as wide as the text in the DIV, if possible.

Answer 1

Remove inline block, use floating, assign width, and padding margin.Here is the demo