Two divs side by side - Fluid display

Question

I am trying to place two divs side by side and using the following CSS for it    left     float  left    width  65     overflow  hidden      right     overflow  hidden      The HTML is simple  two left and right div in a wrapper div    lt div id  wrapper  gt     lt div id  left  gt Left side div lt  div gt     lt div id  right  gt Right side div lt  div gt   lt  div gt    I have tried so many times to search for a better way on StackOverflow and other sites too  But couldn t find the exact help   So  the code works fine at first glance  Problem is this  that the left div gets padding margin automatically as I increase width in      So  at 65  width  the left div is having some padding or margin and is not perfectly aligned with the right div  I tried to padding margin 0 but no luck  Secondly  If I zoom in the page  the right div slides below the left div  Its like not fluid display   Note  I am sorry  I have searched a lot  This question has been asked many times but those answers aren t helping me  I have explained what the problem is in my case   I hope there is a fix for that   Thank you   EDIT  Sorry  me HTML problem  There were two  box  divs in both left and right sides  They had padding in    So left side showed more padding because of greater width  Sorry  The above CSS works perfect  its fluid display and fixed  Sorry for asking the wrong question

User · Answer

This is easy with a flexbox    x000D   x000D   wrapper   x000D    display  flex  x000D    x000D   x000D   left   x000D    flex  0 0 65   x000D    x000D   x000D   right   x000D    flex  1  x000D    x000D   lt div id  wrapper  gt  x000D     lt div id  left  gt Left side div lt  div gt  x000D     lt div id  right  gt Right side div lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Make both divs like this  This will align both divs side-by-side    my-class     display   inline-flex

User · Answer

x000D   x000D   sides  x000D  margin 0  x000D    x000D   left  x000D  float left  x000D  width 75   x000D  overflow hidden  x000D    x000D   right  x000D  float left  x000D  width 25   x000D  overflow hidden  x000D     x000D   lt h1 id  left  gt Left Side lt  h1 gt  x000D   lt h1 id  right  gt Right Side lt  h1 gt  x000D   lt  -- It Works -- gt  x000D   x000D   x000D

User · Answer

Try a system like this instead    x000D   x000D   container   x000D    width  80   x000D    height  200px  x000D    background  aqua  x000D    margin  auto  x000D    padding  10px  x000D    x000D   x000D   one   x000D    width  15   x000D    height  200px  x000D    background  red  x000D    float  left  x000D    x000D   x000D   two   x000D    margin-left  15   x000D    height  200px  x000D    background  black  x000D    x000D   lt section class  container  gt  x000D     lt div class  one  gt  lt  div gt  x000D     lt div class  two  gt  lt  div gt  x000D   lt  section gt  x000D   x000D   x000D    You only need to float one div if you use margin-left on the other equal to the first div s width  This will work no matter what the zoom and will not have sub-pixel problems

User · Answer

You can also use the Grid View its also Responsive its something like this   wrapper      width  auto      height  auto      box-sizing  border-box      display  grid      grid-auto-flow  row      grid-template-columns  repeat 6  1fr       left      text-align  left      grid-column  1 4      right       text-align  right      grid-column  4 6     and the HTML should look like this    lt div id  quot wrapper quot  gt   lt div id  quot left quot   gt     some awesome stuff  lt  div gt   lt div id  quot right quot   gt     some awesome stuff  lt  div gt   lt  div gt   here is a link for more information  https   www w3schools com css css rwd grid asp im quite new but i thougt i could share my little experience

User · Answer

Using this CSS for my current site  It works perfect    sides  margin 0     left  float left  width 75   overflow hidden     right  float left  width 25   overflow hidden

User · Answer

Here s my answer for those that are Googling   CSS    column       float  left      width  50         Clear floats after the columns     container after       content          display  table      clear  both      Here s the HTML    lt div class  container  gt       lt div class  column  gt  lt  div gt       lt div class  column  gt  lt  div gt   lt  div gt

User · Answer

x000D   x000D   lt div style  height 50rem  width 100   margin  auto   gt     lt div style  height 50rem  width 20   margin-left 4   margin-right 0   float left  background-color  black   gt  lt  div gt     lt div style  height 50rem  width 20   margin-left 4   margin-right 0   float left   background-color  black   gt  lt  div gt     lt div style  height 50rem  width 20   margin-left 4   margin-right 0   float left   background-color  black   gt  lt  div gt     lt div style  height 50rem  width 20   margin-left 4   margin-right 0   float left   background-color  black   gt  lt  div gt   lt  div gt  x000D   x000D   x000D   margin-right isn t needed though

[html] Two divs side by side - Fluid display

Examples related to html

Examples related to css

Examples related to fluid-layout