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

Question

I try to build fluid layout using percentages as widths  Do do so i tried this    lt div style  width 50   display inline-table   gt A lt  div gt   lt div style  width 50   display inline-table   gt B lt  div gt    In that case they wont stand in one line  but if i remove line break between them  like this        lt div style  width 50   display inline-table   gt A lt  div gt  lt div style  width 50     display inline-table   gt B lt  div gt    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

User · Answer

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

User · Answer

lt div id  wrapper  style  width  400px  gt       lt div id  left  style  float  left  width  200px   gt Left lt  div gt       lt div id  right  style  float  right  width  200px   gt Left lt  div gt       lt div style  clear  both   gt  lt  div gt   lt  div gt    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

User · Answer

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    x000D   x000D   container   x000D    display  table  x000D    width  100   x000D    x000D   container div   x000D    display  table-cell  x000D    x000D   lt div class  container  gt  x000D     lt div gt A lt  div gt  x000D     lt div gt B lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    2  Flexbox  FIDDLE    x000D   x000D   container   x000D    display  flex  x000D    x000D   container div   x000D    flex  1  x000D    x000D   lt div class  container  gt  x000D     lt div gt A lt  div gt  x000D     lt div gt B lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    For a reference  this CSS-tricks post seems to sum up the various approaches to acheive this

User · Answer

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    x000D   x000D  div   x000D    background  red  x000D    x000D  div   div   x000D    background  green  x000D    x000D   lt div style  width 50   display inline-block   gt A lt  div gt  lt div style  width 50   display inline-block   gt B lt  div gt  x000D   x000D   x000D

User · Answer

Give this parent DIV font-size 0  Write like this    lt div style  font-size 0  gt     lt div style  width 50   display inline-table font-size 15px  gt A lt  div gt     lt div style  width 50   display inline-table font-size 15px  gt B lt  div gt   lt  div gt

User · Answer

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      lt table width  100   cellspacing  0  gt       lt tr gt           lt td style  width 50    gt A lt  td gt           lt td style  width 50    gt B lt  td gt                   lt  tr gt   lt  table gt    Check a more complete example here  http   jsfiddle net qPduw 5

User · Answer

Wrap them around a div with the following CSS   div wrapper      white-space  nowrap

User · Answer

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    lt div style  width 50   display inline-table   gt A lt  div gt  lt  -- -- gt  lt div style  width 50   display inline-table   gt B lt  div gt

User · Answer

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    lt div id  a  gt A lt  div gt   lt div id  b  gt B lt  div gt    css    a   b       width  49       display  inline-block      a  background-color  red    b  background-color  blue

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

Examples related to css

Examples related to inline