Aligning two divs side-by-side

Question

I have a small problem  I am trying to align two divs side by side using CSS  however  I would like the center div to be positioned horizontally central in the page  I achieved this by using    page-wrap   margin 0 auto      That s worked fine  The second div I would like positioned to the left side of the central page wrap but I can t manage to do this using floats although I m sure it is possible   I would like to push the red div up alongside the white div   Here is my current CSS concerning these two divs  sidebar being the red div and page-wrap being the white div    sidebar       width  200px      height  400px      background  red      float  left      page-wrap       margin  0 auto      width  600px      background   ffffff      height  400px

User · Answer

This Can be Done by Style Property    lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt    main      display  flex      main div     flex-grow  0    flex-shrink  0    flex-basis  40px     lt  style gt   lt  head gt   lt body gt    lt div id  main  gt     lt div style  background-color coral   gt Red DIV lt  div gt     lt div style  background-color lightblue   id  myBlueDiv  gt Blue DIV lt  div gt   lt  div gt    lt  body gt   lt  html gt    Its Result will be      Enjoy     Please Note  This works in Higher version of CSS   3 0

User · Answer

It s also possible to to do this without the wrapper - div main  You can center the  page-wrap using the margin  0 auto  method and then use the left -n  method to position the  sidebar and adding the width of  page-wrap   body   background  black     sidebar          position  absolute      left  50       width  200px      height  400px      background  red      margin-left  -230px          page-wrap        width  60px      background   fff      height  400px      margin  0 auto          However  the sidebar would disappear beyond the browser viewport if the window was smaller than the content   Nick s second answer is best though  because it s also more maintainable as you don t have to adjust  sidebar if you want to resize  page-wrap

User · Answer

The HTML code is for three div align side by side and can be used for two also by some changes   lt div id  wrapper  gt     lt div id  first  gt first lt  div gt     lt div id  second  gt second lt  div gt     lt div id  third  gt third lt  div gt   lt  div gt    The CSS will be   wrapper     display table    width 100      row     display table-row     first     display table-cell    background-color red    width 33      second     display table-cell    background-color blue    width 33      third     display table-cell    background-color  bada55    width 34       This code will workup towards responsive layout as it will resize the    lt div gt     according to device width   Even one can silent anyone   lt div gt    as   lt  -- lt div id  third  gt third lt  div gt  -- gt     and can use rest two for two   lt div gt     side by side

User · Answer

If you wrapped your divs  like this    lt div id  main  gt     lt div id  sidebar  gt  lt  div gt     lt div id  page-wrap  gt  lt  div gt   lt  div gt    You could use this styling    main        width  800px      margin  0 auto     sidebar          width  200px      height  400px      background  red      float  left      page-wrap        width  600px      background   ffffff      height  400px      margin-left  200px      This is a slightly different look though  so I m not sure it s what you re after   This would center all 800px as a unit  not the 600px centered with the 200px on the left side   The basic approach is your sidebar floats left  but inside the main div  and the  page-wrap has the width of your sidebar as it s left margin to move that far over   Update based on comments  For this off-centered look  you can do this    lt div id  page-wrap  gt     lt div id  sidebar  gt  lt  div gt   lt  div gt    With this styling    sidebar          position  absolute      left  -200px      width  200px      height  400px      background  red          page-wrap        position  relative      width  600px      background   ffffff      height  400px      margin  0 auto

User · Answer

I don t understand why Nick is using margin-left  200px  instead off floating the other div to the left or right  I ve just tweaked his markup  you can use float for both elements instead of using margin-left   Demo   main       margin  auto      width  400px      sidebar          width  100px      min-height  400px      background  red      float  left      page-wrap        width  300px      background   0f0      min-height  400px      float  left      clear after       clear  both      display  table      content          Also  I ve used  clear after which am calling on the parent element  just to self clear the parent

User · Answer

The easiest method would be to wrap them both in a container div and apply margin  0 auto  to the container   This will center both the  page-wrap and the  sidebar divs on the page  However  if you want that off-center look  you could then shift the container 200px to the left  to account for the width of the  sidebar div

[css] Aligning two divs side-by-side

Examples related to css

Examples related to css-float