Div side by side without float

Question

How can I make div 'left' and 'right' look like columns side by side?

I know I can use float:left on them and that will work... but on step 5 and 6 in here http://www.barelyfitz.com/screencast...s/positioning/ the guy says it is possible, I can't get it work though...

Code:

<style> div.left {     background:blue;     height:200px;     width:300px; }  div.right{     background:green;     height:300px;     width:100px; }  .container{     background:black;     height:400px;     width:450px; } </style>  <div class="container">         <div class="left">             LEFT         </div>         <div class="right">             RIGHT         </div> </div> 

Answer 1

The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div {   display: inline-block; } 

Do note its limitations though: There is a additional space after the first bloc - this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. This could break your layout and/or not look nice, and I'd prefer not to strip out all whitespaces between characters for the sake of this working.

Floats are also more flexible, in most cases.