CSS deux div largeur de 50% en une seule ligne avec saut de ligne dans le fichier

le problème est que si vous avez une nouvelle ligne entre eux dans le HTML, alors vous obtenez un espace entre eux lorsque vous utilisez inline-table ou inline-block

50% + 50% + espace > 100% et c'est pourquoi la deuxième on finit par en-dessous,

Solutions:

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

ou

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

ou

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

l'idée est de n'avoir aucune sorte d'espace entre la première balise de fermeture div et la deuxième balise d'ouverture div dans votre HTML.

PS - je voudrais aussi utiliser inline-block au lieu de inline-table pour ce

Give this parent DIV font-size:0 . Écrivez comme ceci:

<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>

enveloppez-les autour d'un div avec le CSS suivant

.div_wrapper{
    white-space: nowrap;
}

Comment puis-je faire quelque chose comme ça sans utiliser la position absolue et float?

outre l'utilisation de l'approche inline-block (comme mentionné dans d'autres réponses) voici quelques autres approches:

1) tableaux CSS ( 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>

Pour une référence, cette CSS-tricks post semble résumer les différentes approches pour réaliser cela.

<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>

je sais que cette question voulait bloc en ligne, mais essayez de voir http://jsfiddle.net/N9mzE/1 / dans IE 7 (le plus ancien navigateur pris en charge où je travaille). Les divs sont pas côte à côte.

OP dit qu'il ne voulait pas utiliser de flotteurs parce qu'il ne les aimait pas. Eh bien ... à mon avis, faire de bonnes pages web qui ne semble pas bizarre dans les navigateurs devrait être l'objectif principal, et vous le faites en utilisant des flotteurs.

honnêtement, Je peux voir le problème. Les flotteurs sont fantastiques.

fondamentalement inline-table est pour la table d'élément, je suppose que ce que vous avez vraiment besoin ici est inline-block , si vous devez utiliser inline-table de toute façon, essayez-le de cette façon:

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

Désolé, mais toutes les réponses que je vois ici sont soit hacky ou échouer si vous éternuez un peu plus difficile.

si vous utilisez une table, vous pouvez (si vous le souhaitez) ajouter un espace entre les divs, définir les bordures, padding...

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

Cochez un exemple plus complet ici: http://jsfiddle.net/qPduw/5 /

le problème que vous rencontrez lorsque vous définissez la largeur à 50% est l'arrondissement des sous-pixels. Si la largeur de votre conteneur est de 99 pixels, une largeur de 50% peut donner 2 conteneurs de 50 pixels chacun.

L'utilisation de flotteur est probablement la plus facile, et pas une si mauvaise idée. Voir cette" question pour plus de détails sur la façon de résoudre le problème.

si vous ne voulez pas utiliser float, essayez d'utiliser une largeur de 49%. Cela fonctionne à travers le navigateur d'après ce que je sais, mais ce n'est pas parfait..

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;}