Div side by side without float

Question

How can I make div  left  and  right  look like columns side by side    I know I can use float left on them and that will work    but on step 5 and 6 in here http   www barelyfitz com screencast   s positioning  the guy says it is possible  I can t get it work though     Code    lt style gt  div left       background blue      height 200px      width 300px     div right      background green      height 300px      width 100px      container      background black      height 400px      width 450px     lt  style gt    lt div class  container  gt           lt div class  left  gt              LEFT          lt  div gt           lt div class  right  gt              RIGHT          lt  div gt   lt  div gt

User · Answer

You can also use CSS3 flexbox layout  which is well supported nowadays    container       display  flex      flex-flow  row nowrap      justify-content  space-between      background black      height 400px      width 450px      left       flex  0 0 300px      background blue      height 200px      right       flex  0 1 100px      background green      height 300px      See Example  with legacy styles for maximum compatiblity   amp  Learn more about flexbox

User · Answer

Use display table-cell  for removing space between  Left and  Right   x000D   x000D  div left   x000D      background blue  x000D      height 200px  x000D      width 300px  x000D    x000D   x000D  div right  x000D      background green  x000D      height 300px  x000D      width 100px  x000D    x000D   x000D   container  x000D      background black  x000D      height 400px  x000D      width 450px  x000D    x000D   x000D   container  gt  div   x000D      display  table-cell  x000D    x000D   lt div class  container  gt  x000D     lt div gt  x000D       lt div class  left  gt  x000D        LEFT x000D       lt  div gt  x000D     lt  div gt  x000D     lt div gt  x000D       lt div class  right  gt  x000D        RIGHT x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can try with margin for right div  margin  -200px 0 0 350px

User · Answer

I am currently working on this  and i have already a number of solutions  It is nice to have a high quality site  that i can use also for my convenience  Because if you do not write these things down  you will eventually forget some parts  And i can also recommend writing some basic s down if you are starting any kind of new programming design   So if the float functions are causing problems there is a couple of options you can try   One is modify the div alignment in the div tag it self like so  lt div class  kosher  align left gt  If this does not suit you then there is another option with margin like so    leftdiv       display  inline-block      width  40       float  left     rightdiv       display  block      margin-right  20px      margin-left  45       Don t forget to remove the  lt div align left gt

User · Answer

A div is a block level element  meaning that will behave as a block  and blocks can t stay side by side without being floated  You can however set them to inline elements with   display inline-block    Give it a try       Another way is to place them using   position absolute  left 0    and or  position absolute  right 0    Note  For this to work as expected  the wrapper element must have a position relative  so that the elements with absolute positioning stay relative to their wrapper element

User · Answer

The usual method when not using floats is to use display  inline-block  http   www jsfiddle net zygnz 1    container div     display  inline-block      Do note its limitations though  There is a additional space after the first bloc - this is because the two blocks are now essentially inline elements  like a and em  so whitespace between the two counts  This could break your layout and or not look nice  and I d prefer not to strip out all whitespaces between characters for the sake of this working    Floats are also more flexible  in most cases

[css] Div side by side without float

Examples related to css

Examples related to html

Examples related to css-float