Float inside an absolute div inside a relative inline-block div

Question

hope someone can give me a hand with this, I've searched but can't find anyone with the same problem.

I'm re-jigging a menu for my website and I need these .float-columns to appear next to each other, but in this set-up they appear under each other.

.main{
 display: inline-block;
 position:relative;}

.content {
    position: absolute;
}
.float-column  {
 background: #FFF000;
    float:left;
}

<div class="main">
<div class="content">
<div class="float-column">Column 1</div>
<div class="float-column">Column 2</div>
</div>
</div>

I can make them appear as expected by removing the position from the .content or removing the position/display from the .main, unfortunately I can't do this as it breaks the rest of the menu.

I've had limited success when specifying fixed widths for the .float-column and .content, but ideally I'd like to leave it flexible (so I can add as many columns as needed)

Is there any way around this? Am I missing something obvious?

JSFIDDLE

Answer 1

as per your requirement, you just need to remove inline block from the main class. That will make the columns align side by side.