Q:

inline-block div wraps with width=50% and some text in it

Please look at this fiddle.
I have different behavior for following two classes.
.class2 {
    width: 49.5%;
    display: inline-block;
}

.class3 {
    width: 50%;    /* Wraps to next line */
    display: inline-block;
}

What I wanted to do is to divide the width equally b/w two divs and then start filling each div * with its own content.
But with width 50%, if I put some text in the div, the second div wraps to next line
With width 49.x%, it does not wrap.

Why is it wrapping? I am working inside a particualr div.
How can I make it not wrap and keep width = 50%.
Other than 50%, I dont know how to come-up with the correct value.

A:

Use float: left; to float you 1st <div> on the left and you can also float your 2nd <div> on the right using float: right; than use <div style="clear: both;"></div> to clear your floating elements:
CSS:
.class1 {
    background-color: red;
    width: 100%;
}
.class2 {
    width: 50%;
    background-color: blue;
    color: white;
    float: left;
}

.class3 {
background-color: green;
    width: 50%;
    float: right;
}

HTML:
<div class="class1">
  <div class="class2">
      This is demo
  </div>
      <div class="class3">
          This is demo          
    </div>
  <div style="clear: both;">
</div>

My fiddle

