Two Inline-Block, Width 50% Elements Wrap to Second Line

Two inline-block, width 50% elements wrap to second line

It is because display:inline-block takes into account white-space in the html. If you remove the white-space between the div's it works as expected. Live Example: http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

Two div have width 50% and inline-block but still not in one line (no white space)

My god, i solved this problem, just move div.versus-wraper to the last of span.field-content, everything become good.

But still don't know why it make a problem, still a mysterious with me. There are something to learn, if someone know, please answer.

Here is my question will more explain : Browser image render break css inline-block layout

CSS two div width 50% in one line with line break in file

The problem is that when something is inline, every whitespace is treated as an actual space. So it will influence the width of the elements. I recommend using float or display: inline-block. (Just don't leave any whitespace between the divs).

Here is a demo:

div {  background: red;}div + div {  background: green;}

<div style="width:50%; display:inline-block;">A</div><div style="width:50%; display:inline-block;">B</div>

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

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

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

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

Allow inline-block elements to wrap before stacking

Use display: table-cell; Instead of display:inline-block will solve your issue.

.title {     display: table-cell;     vertical-align: top;}.box {    display: table-cell;     vertical-align: top;}

<div class="title">    <h1>Hi</h1>    <h2>Lots of text I want to wrap</h2></div><div class="box">    Should stay in a block</div>

Is it possible to made inline-block elements line-wrap like inline text?

If this is only for the visual purpose then you might have a way using a span element where you apply multiple gradient.

Here is a self-explanatory example:

.container {  width: 200px;  padding:5px;  background-color: lightblue;  text-align:justify;}
span {  padding:0;  background-image:    linear-gradient(hsl(0, 80%, 50%),hsl(0, 80%, 50%)),    linear-gradient(hsl(20, 80%, 50%),hsl(20, 80%, 50%)),    linear-gradient(hsl(40, 80%, 50%),hsl(40, 80%, 50%)),    linear-gradient(hsl(60, 80%, 50%),hsl(60, 80%, 50%));  background-size:    100px 100%, /* 1st color width = 100px */    280px 100%, /* 2nd color width = 280px - 100px = 180px */    450px 100%, /* 3rd color width = 450px - 280px = 170px */    520px 100%; /* 4th color width = 520px - 450px = 70px */  background-repeat:no-repeat;}
/* we fill the span with content */span::before,span::after{  content:"█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █";  color:transparent;}

<div class="container"><span ></span></div>

inline-block not working together with overflow-wrap for divs

if you just want to have both the divs in the same line, consider wrapping them in a parent div with display:flex

Learn about flexbox model here

Check here:

div {  display: inline-block;}
div.bar {  overflow-wrap: break-word;  word-break: break-all;}
div.flex-parent {  display: flex;}

<div class="flex-parent">  <div>foo</div>  <div class="bar">    barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar  </div></div>

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

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

Two Inline-Block, Width 50% Elements Wrap to Second Line