Question

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.

Answer 1

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