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

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

Try floating your divs like this:
.class1 {
background-color: red;
width: 100%;
}
.class2 {
width: 50%;
display: inline-block;
background-color: blue;
color: white;
float:left;
}
.class3 {
width: 50%;
display: inline-block;
background-color: blue;
color: white;
float:right;
}

Answer 2

You do not need to resort to float. That is a relatively ugly workaround that introduces its own problem (having to clear floats and/or set overflow:hidden on the containing element).
You do not provide your HTML markup but I would guess you have whitespace between the elements, as in Mr Alien's answer.
See Two inline-block, width 50% elements wrap to second line for a better solution.

Answer 3

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

Answer 4

The reason that they stack instead of sit next to one another is that display: inline-block recognizes white space. If you have a return after your first div, then it will pick that up and cause it to stack. A work around would be something similar to...
<div class="col1">
Column one content.
</div><div class="col2">
Column two content.
</div>

Answer 5

Don't use floats, they cause all sorts of headaches. Just add this to your CSS:
body,html{ white-space:nowrap; }
a,pre,p,span,strong,h1,h2,h3,h4,h5,h6{ white-space:normal; }
...then make sure all text on your site is contained either within 'p' or 'span'

Answer 6

I often use display:inline-block; .
However, display:inline-block has some problem.
I recommend Grids - Pure pattern and wrote a sample code like Pure.
.class1 {
letter-spacing: -0.31em;
*letter-spacing: normal;
*word-spacing: -0.43em;
text-rendering: optimizespeed;
font-family: Georgia, Times, "Times New Roman", serif;
}
.class2, .class3 {
display: inline-block;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
font-family: "Hiragino Kaku Gothic ProN",Meiryo,Verdana,sans-serif;
width: 50%;
}
my fiddle

Answer 7

Put a:
margin:-2px;
into your class3.
This doesn't break your div but solve your problem.
Don't know why