Creating multiple column layout with div's - css

Question

I wanted to add a multiple column layout to one of my parent div's to display small widgets. I started of with 3 columns left, middle and right.
I tried to get the columns to display next to each other by using:
display: inline-block;
vertical-align: top;
But it didn't work JS Fiddle
I also tried to use:
float: left;
But again no success JS Fiddle
I got it right by using:
display: table-cell
Now my problem is that when using this last method it sets a minimum width after which it would not scale any smaller and it adds a scroll bar to the bottom of the page which I do not want.
I would like to know why the first two methods did not work in my scenario as I have found other answers on SO that shows that the first two methods are possible solutions.
CSS
#left_widget_column {
border: 0px;
margin: 10px 65% 10px 2%;
padding: 0px;
width: 32%;
}
#middle_widget_column {
border: 0px;
margin: 10px 34% 10px 34%;
padding: 0px;
width: 31%;
}
#right_widget_column {
border: 0px;
margin: 10px 2% 10px 65%;
padding: 0px;
width: 32%;
}
HTML
<div id="left_widget_column">
<h2>Widget 1:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit venenatis tempor. Mauris sit amet consequat dui.</p>
</div>
<div id="middle_widget_column">
<h2>Widget 2:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit venenatis tempor. Mauris sit amet consequat dui.</p>
</div>
<div id="right_widget_column">
<h2>Widget 3:</h2>
<p>Fusce felis nisl, egestas a dolor sit amet, mollis cursus diam. Nulla malesuada ullamcorper ante. Vestibulum pulvinar, metus a congue eleifend, magna eros mattis lectus, sed vestibulum neque augue vel risus.</p>
</div>

Answer 1

you should not using:
margin: 10px 34% 10px 34%;
http://jsfiddle.net/Whysg/2/
when using float:left the next Div location inside previous div so that's not need margin or ...

Answer 2

You should not use 3 id's: 1 class for the layout is enough. You can add id later on to use it in js, for example.
DEMO
.col {
box-sizing: border-box;
float: left;
width: 32%;
padding: 10px;
margin-left: 2%;
}
.col:first-child {
margin-left: 0;
}

Answer 3

Have you not thought of using floats instead? Remove the margins.
#left_widget_column {
border: 0px;
padding: 0px;
float: left;
width: 32%;
}
#middle_widget_column {
border: 0px;
padding: 0px;
width: 32%;
float: left;
}
#right_widget_column {
border: 0px;
padding: 0px;
width: 32%;
float: right;
}
See it here LIVE: http://jsfiddle.net/Whysg/3/