CSS Two Div Width 50% in One Line with Line Break in File

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>

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

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>

CSS two divs next to each other (w/o line break)

I'm not sure what grid-framework you are using, but I'm sure that text-left and text-right are helper-classes that provide a text-align property.

A solution for your problem is to make the divs float, like I demonstrated in this Jsfiddle: https://jsfiddle.net/hptv52gv/.

How to keep div width 50% on text change?

You may use CSS Flexbox here:

.container {
  display: flex;
  width: 200px;
}

.text1 {
  background-color: red;
  width: 50%;
}

.text2 {
  background-color: blue;
  width: 50%;
}

<div class='container'>
  <div class='text1'>Text1</div>
  <div class='text2'>Text2</div>
</div>

How to make multiple divs display in one line but still retain width?

You can use display:inline-block.

This property allows a DOM element to have all the attributes of a block element, but keeping it inline. There's some drawbacks, but most of the time it's good enough. Why it's good and why it may not work for you.

EDIT: The only modern browser that has some problems with it is IE7. See Quirksmode.org

How can I put two div that has the same width and height next to each other without having to scroll?

You need to use flex-direction: row and not flex-direction: column.

To avoid repeating width: 50%; height: 100vh; for both .left and .right, I would also create another class, such as .box, which is applied to both and contains these properties.

body {  margin: 0;}
.main-container {  display: flex;  flex-direction: row;}
.box {  width: 50%;  height: 100vh;}
.left {  background: #ecece9;}
.right {  background: #ffffff;}

<div class="main-container">  <div class="left box">    <h2>content</h2>  </div>  <div class="right box">    <h2>content should be on top</h2>  </div> </div>

CSS when inline-block elements line-break, parent wrapper does not fit new width

You can't. By default, inline-block elements have a shrink-to-fit width:

The shrink-to-fit width is:

min(max(preferred minimum width, available width), preferred width).

Then,

When preferred minimum width <= preferred width <= available width, the width will be the preferred width, as you desire.
When available width <= preferred minimum width <= preferred width, the width will be the preferred minimum width, as you desire.
When preferred minimum width <= available width <= preferred width, the width will be the available width, even if you don't like it.

If you really don't want this, I guess you could add a resize event listener with JS, and set the desired width manually.

How to specify line breaks in a multi-line flexbox layout?

The simplest and most reliable solution is inserting flex items at the right places. If they are wide enough (width: 100%), they will force a line break.

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

CSS Two Div Width 50% in One Line with Line Break in File