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

I try to build fluid layout using percentages as widths. Do do so i tried this:

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

In that case they wont stand in one line, but if i remove line break between them, like this:

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

then it works fine. Where is the problem? How can i do someting like that but without using absolute position and float.

p.s. sorry for english. p.s.s. i hope i good explain my problem

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>

The problem is that if you have a new line between them in the HTML, then you get a space between them when you use inline-table or inline-block

50% + 50% + that space > 100% and that's why the second one ends up below the first one

Solutions:

<div></div><div></div>

or

<div>
</div><div>
</div>

or

<div></div><!--
--><div></div>

The idea is not to have any kind of space between the first closing div tag and the second opening div tag in your HTML.

PS - I would also use inline-block instead of inline-table for this

Wrap them around a div with the following CSS

.div_wrapper{
    white-space: nowrap;
}

Give this parent DIV font-size:0. Write like this:

<div style="font-size:0">
  <div style="width:50%; display:inline-table;font-size:15px">A</div>
  <div style="width:50%; display:inline-table;font-size:15px">B</div>
</div>

> How can i do something like that but without using absolute position > and float?

Apart from using the inline-block approach (as mentioned in other answers) here are some other approaches:

1. CSS tables (FIDDLE) --

.container {
  display: table;
  width: 100%;
}
.container div {
  display: table-cell;
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>

2) Flexbox (FIDDLE)

.container {
  display: flex;
}
.container div {
  flex: 1;
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>

For a reference, this CSS-tricks post seems to sum up the various approaches to acheive this.

CSS Flexboxes

Simple modern solution. Better than HTML tables!

.container {
  display: flex;
}
.container div {
  flex: auto; /* also 1 or 50% */
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>

Alternative: CSS Grids

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* also 50% */
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>

<div id="wrapper" style="width: 400px">
	<div id="left" style="float: left; width: 200px;">Left</div>
	<div id="right" style="float: right; width: 200px;">Left</div>
	<div style="clear: both;"></div>
</div>

I know this question wanted inline block, but try to view http://jsfiddle.net/N9mzE/1/ in IE 7 (the oldest browser supported where I work). The divs are not side by side.

OP said he did not want to use floats because he did not like them. Well...in my opinion, making good webpages that does not look weird in any browsers should be the maingoal, and you do this by using floats.

Honestly, I can see the problem. Floats are fantastic.

basically inline-table is for element table, I guess what you really need here is inline-block, if you have to use inline-table anyway, try it this way:

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

Sorry but all the answers I see here are either hacky or fail if you sneeze a little harder.

If you use a table you can (if you wish) add a space between the divs, set borders, padding...

<table width="100%" cellspacing="0">
    <tr>
        <td style="width:50%;">A</td>
        <td style="width:50%;">B</td>			 
    </tr>
</table>

Check a more complete example here: http://jsfiddle.net/qPduw/5/

The problem you run into when setting width to 50% is the rounding of subpixels. If the width of your container is i.e. 99 pixels, a width of 50% can result in 2 containers of 50 pixels each.

Using float is probably easiest, and not such a bad idea. See this question for more details on how to fix the problem then.

If you don't want to use float, try using a width of 49%. This will work cross-browser as far as I know, but is not pixel-perfect..

html:

<div id="a">A</div>
<div id="b">B</div>

css:

#a, #b {
    width: 49%;
    display: inline-block; 
}
#a {background-color: red;}
#b {background-color: blue;}