Praneel PIDIKITI Praneel PIDIKITI - 7 days ago 4
CSS Question

Div side by side without float

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

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.