CSS two divs next to each other

Question

I want to put two  lt div gt s next to each other  The right  lt div gt  is about 200px  and the left  lt div gt  must fill up the rest of the screen width  How can I do this

User · Accepted Answer

You can use flexbox to lay out your items    x000D   x000D   parent   x000D    display  flex  x000D    x000D   narrow   x000D    width  200px  x000D    background  lightblue  x000D       Just so it s visible    x000D    x000D   wide   x000D    flex  1  x000D       Grow to rest of container    x000D    background  lightgreen  x000D       Just so it s visible    x000D    x000D   lt div id  parent  gt  x000D     lt div id  wide  gt Wide  rest of width  lt  div gt  x000D     lt div id  narrow  gt Narrow  200px  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    This is basically just scraping the surface of flexbox  Flexbox can do pretty amazing things     For older browser support  you can use CSS float and a width properties to solve it    x000D   x000D   narrow   x000D    float  right  x000D    width  200px  x000D    background  lightblue  x000D    x000D   wide   x000D    float  left  x000D    width  calc 100  - 200px   x000D    background  lightgreen  x000D    x000D   lt div id  parent  gt  x000D     lt div id  wide  gt Wide  rest of width  lt  div gt  x000D     lt div id  narrow  gt Narrow  200px  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

div1       float  right     div2       float  left      This will work OK as long as you set clear  both for the element that separates this two column block

User · Answer

I ran into this problem today  Based on the solutions above  this worked for me    lt div style  width 100    gt        lt div style  float left   gt Content left div lt  div gt        lt div style  float right   gt Content right div lt  div gt    lt  div gt     Simply make the parent div span the full width and float the divs contained within

User · Answer

The method suggested by  roe and  MohitNanda work  but if the right div is set as float right   then it must come first in the HTML source  This breaks the left-to-right read order  which could be confusing if the page is displayed with styles turned off  If that s the case  it might be better to use a wrapper div and absolute positioning    lt div id  wrap  style  position relative   gt       lt div id  left  style  margin-right 201px border 1px solid red   gt left lt  div gt       lt div id  right  style  position absolute width 200px right 0 top 0 border 1px solid blue   gt right lt  div gt   lt  div gt    Demonstrated        left     right   Edit  Hmm  interesting  The preview window shows the correctly formatted divs  but the rendered post item does not  Sorry then  you ll have to try it for yourself

User · Answer

The method suggested by  roe and  MohitNanda work  but if the right div is set as float right   then it must come first in the HTML source  This breaks the left-to-right read order  which could be confusing if the page is displayed with styles turned off  If that s the case  it might be better to use a wrapper div and absolute positioning    lt div id  wrap  style  position relative   gt       lt div id  left  style  margin-right 201px border 1px solid red   gt left lt  div gt       lt div id  right  style  position absolute width 200px right 0 top 0 border 1px solid blue   gt right lt  div gt   lt  div gt    Demonstrated        left     right   Edit  Hmm  interesting  The preview window shows the correctly formatted divs  but the rendered post item does not  Sorry then  you ll have to try it for yourself

User · Answer

Unfortunately  this is not a trivial thing to solve for the general case  The easiest thing would be to add a css-style property  float  right   to your 200px div  however  this would also cause your  main -div to actually be full width and any text in there would float around the edge of the 200px-div  which often looks weird  depending on the content  pretty much in all cases except if it s a floating image    EDIT  As suggested by Dom  the wrapping problem could of course be solved with a margin  Silly me

User · Answer

I don t know if this is still a current issue or not but I just encountered the same problem and used the CSS display  inline-block  tag  Wrapping these in a div so that they can be positioned appropriately     lt div gt       lt div style  display  inline-block   gt Content1 lt  div gt       lt div style  display  inline-block   gt Content2 lt  div gt   lt  div gt    Note that the use of the inline style attribute was only used for the succinctness of this example of course these used be moved to an external CSS file

User · Answer

div1       float  right     div2       float  left      This will work OK as long as you set clear  both for the element that separates this two column block

User · Answer

UPDATE  If you need to place elements in a row  you can use Flex Layout  Here you have another Flex tutorial  It s a great CSS tool and even though it is not 100  compatible  each day its support is getting better  This works as simple as   HTML   lt div class  container  gt       lt div class  contentA  gt  lt  div gt       lt div class  contentB  gt  lt  div gt   lt  div gt    CSS   container       display  flex      width  100       height  200px      contentA       flex  1      contentB       flex  3      And what you get here is a container with a total size of 4 units  that share the space with its children in a relation of 1 4 and 3 4   I have done an example in CodePen that solves your problem  I hope it helps   http   codepen io timbergus pen aOoQLR editors 110  VERY OLD  Maybe this is just a nonsense  but have you tried with a table  It not use directly CSS for positioning the divs  but it works fine   You can create a 1x2 table and put your divs inside  and then formatting the table with CSS to put them as you want    lt table gt     lt tr gt       lt td gt         lt div gt  lt  div gt       lt  td gt       lt td gt         lt div gt  lt  div gt       lt  td gt     lt  tr gt   lt  table gt    Note  If you want to avoid using the table  as said before  you can use float  left  and float  right and in the following element  don t forget to add a clear  left   clear  right  or clear  both  in order to have the position cleaned

User · Answer

As everyone has pointed out  you ll do this by setting a float right  on the RHS content and a negative margin on the LHS   However   if you don t use a float  left  on the LHS  as Mohit does  then you ll get a stepping effect because the LHS div is still going to consume the margin d space in layout   However   the LHS float will shrink-wrap the content  so you ll need to insert a defined width childnode if that s not acceptable  at which point you may as well have defined the width on the parent   However   as David points out you can change the read-order of the markup to avoid the LHS float requirement  but that s has readability and possibly accessibility issues   However   this problem can be solved with floats given some additional markup   caveat  I don t approve of the  clearing div at that example  see here for details   All things considered  I think most of us wish there was a non-greedy width remaining in CSS3

User · Answer

I don t know if this is still a current issue or not but I just encountered the same problem and used the CSS display  inline-block  tag  Wrapping these in a div so that they can be positioned appropriately     lt div gt       lt div style  display  inline-block   gt Content1 lt  div gt       lt div style  display  inline-block   gt Content2 lt  div gt   lt  div gt    Note that the use of the inline style attribute was only used for the succinctness of this example of course these used be moved to an external CSS file

User · Answer

To paraphrase one of my websites that does something similar    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt    lt head gt     lt style TYPE  text css  gt  lt  --   section        float  right       margin-right  210px       margin-right  10px       width  expression   document body clientWidth - 250     px        navbar       margin  10px 0      float  right      width  200px      padding  9pt 0       -- gt  lt  style gt    lt  head gt    lt body gt     lt div class  navbar  gt    This will take up the right hand side    lt  div gt     lt div class  section  gt    This will fill go to the left of the  navbar  div    lt  div gt    lt  body gt   lt  html gt

User · Answer

To paraphrase one of my websites that does something similar    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt    lt head gt     lt style TYPE  text css  gt  lt  --   section        float  right       margin-right  210px       margin-right  10px       width  expression   document body clientWidth - 250     px        navbar       margin  10px 0      float  right      width  200px      padding  9pt 0       -- gt  lt  style gt    lt  head gt    lt body gt     lt div class  navbar  gt    This will take up the right hand side    lt  div gt     lt div class  section  gt    This will fill go to the left of the  navbar  div    lt  div gt    lt  body gt   lt  html gt

User · Answer

just use a z-index and everything will sit nice  make sure to have positions marked as fixed or absolute  then nothing will move around like with a float tag

User · Answer

I use a mixture of float and overflow-x hidden  Minimal code  always works   https   jsfiddle net 9934sc4d 4  - PLUS you don t need to clear your float    left-half      width 200px      float left     right-half      overflow-x hidden

User · Answer

I ran into the same problem and Mohits version works  If you want to keep your left-right order in the html  just try this  In my case  the left div is adjusting the size  the right div stays at width 260px   HTML   lt div class  box  gt   lt div class  left  gt Hello lt  div gt   lt div class  right  gt World lt  div gt   lt  div gt    CSS   box       height  200px      padding-right  260px          box  left       float  left      height  200px      width  100       box  right       height  200px      width  260px      margin-right  -260px      The trick is to use a right padding on the main box but use that space again by placing the right box again with margin-right

User · Answer

I ran into this problem today  Based on the solutions above  this worked for me    lt div style  width 100    gt        lt div style  float left   gt Content left div lt  div gt        lt div style  float right   gt Content right div lt  div gt    lt  div gt     Simply make the parent div span the full width and float the divs contained within

User · Answer

As everyone has pointed out  you ll do this by setting a float right  on the RHS content and a negative margin on the LHS   However   if you don t use a float  left  on the LHS  as Mohit does  then you ll get a stepping effect because the LHS div is still going to consume the margin d space in layout   However   the LHS float will shrink-wrap the content  so you ll need to insert a defined width childnode if that s not acceptable  at which point you may as well have defined the width on the parent   However   as David points out you can change the read-order of the markup to avoid the LHS float requirement  but that s has readability and possibly accessibility issues   However   this problem can be solved with floats given some additional markup   caveat  I don t approve of the  clearing div at that example  see here for details   All things considered  I think most of us wish there was a non-greedy width remaining in CSS3

User · Answer

This won t be the answer for everyone  since it is not supported in IE7-  but you could use it and then use an alternate answer for IE7-  It is display  table  display  table-row and display  table-cell  Note that this is not using tables for layout  but styling divs so that things line up nicely with out all the hassle from above  Mine is an html5 app  so it works great   This article shows an example  http   www sitepoint com table-based-layout-is-the-next-big-thing   Here is what your stylesheet will look like     container       display  table      width 100         left-column       display  table-cell        right-column       display  table-cell      width  200px

User · Answer

The method suggested by  roe and  MohitNanda work  but if the right div is set as float right   then it must come first in the HTML source  This breaks the left-to-right read order  which could be confusing if the page is displayed with styles turned off  If that s the case  it might be better to use a wrapper div and absolute positioning    lt div id  wrap  style  position relative   gt       lt div id  left  style  margin-right 201px border 1px solid red   gt left lt  div gt       lt div id  right  style  position absolute width 200px right 0 top 0 border 1px solid blue   gt right lt  div gt   lt  div gt    Demonstrated        left     right   Edit  Hmm  interesting  The preview window shows the correctly formatted divs  but the rendered post item does not  Sorry then  you ll have to try it for yourself

User · Answer

just use a z-index and everything will sit nice  make sure to have positions marked as fixed or absolute  then nothing will move around like with a float tag

User · Answer

To paraphrase one of my websites that does something similar    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt    lt head gt     lt style TYPE  text css  gt  lt  --   section        float  right       margin-right  210px       margin-right  10px       width  expression   document body clientWidth - 250     px        navbar       margin  10px 0      float  right      width  200px      padding  9pt 0       -- gt  lt  style gt    lt  head gt    lt body gt     lt div class  navbar  gt    This will take up the right hand side    lt  div gt     lt div class  section  gt    This will fill go to the left of the  navbar  div    lt  div gt    lt  body gt   lt  html gt

User · Answer

This won t be the answer for everyone  since it is not supported in IE7-  but you could use it and then use an alternate answer for IE7-  It is display  table  display  table-row and display  table-cell  Note that this is not using tables for layout  but styling divs so that things line up nicely with out all the hassle from above  Mine is an html5 app  so it works great   This article shows an example  http   www sitepoint com table-based-layout-is-the-next-big-thing   Here is what your stylesheet will look like     container       display  table      width 100         left-column       display  table-cell        right-column       display  table-cell      width  200px

User · Answer

I use a mixture of float and overflow-x hidden  Minimal code  always works   https   jsfiddle net 9934sc4d 4  - PLUS you don t need to clear your float    left-half      width 200px      float left     right-half      overflow-x hidden

User · Answer

UPDATE  If you need to place elements in a row  you can use Flex Layout  Here you have another Flex tutorial  It s a great CSS tool and even though it is not 100  compatible  each day its support is getting better  This works as simple as   HTML   lt div class  container  gt       lt div class  contentA  gt  lt  div gt       lt div class  contentB  gt  lt  div gt   lt  div gt    CSS   container       display  flex      width  100       height  200px      contentA       flex  1      contentB       flex  3      And what you get here is a container with a total size of 4 units  that share the space with its children in a relation of 1 4 and 3 4   I have done an example in CodePen that solves your problem  I hope it helps   http   codepen io timbergus pen aOoQLR editors 110  VERY OLD  Maybe this is just a nonsense  but have you tried with a table  It not use directly CSS for positioning the divs  but it works fine   You can create a 1x2 table and put your divs inside  and then formatting the table with CSS to put them as you want    lt table gt     lt tr gt       lt td gt         lt div gt  lt  div gt       lt  td gt       lt td gt         lt div gt  lt  div gt       lt  td gt     lt  tr gt   lt  table gt    Note  If you want to avoid using the table  as said before  you can use float  left  and float  right and in the following element  don t forget to add a clear  left   clear  right  or clear  both  in order to have the position cleaned

User · Answer

Unfortunately  this is not a trivial thing to solve for the general case  The easiest thing would be to add a css-style property  float  right   to your 200px div  however  this would also cause your  main -div to actually be full width and any text in there would float around the edge of the 200px-div  which often looks weird  depending on the content  pretty much in all cases except if it s a floating image    EDIT  As suggested by Dom  the wrapping problem could of course be solved with a margin  Silly me

User · Answer

Unfortunately  this is not a trivial thing to solve for the general case  The easiest thing would be to add a css-style property  float  right   to your 200px div  however  this would also cause your  main -div to actually be full width and any text in there would float around the edge of the 200px-div  which often looks weird  depending on the content  pretty much in all cases except if it s a floating image    EDIT  As suggested by Dom  the wrapping problem could of course be solved with a margin  Silly me

User · Answer

As everyone has pointed out  you ll do this by setting a float right  on the RHS content and a negative margin on the LHS   However   if you don t use a float  left  on the LHS  as Mohit does  then you ll get a stepping effect because the LHS div is still going to consume the margin d space in layout   However   the LHS float will shrink-wrap the content  so you ll need to insert a defined width childnode if that s not acceptable  at which point you may as well have defined the width on the parent   However   as David points out you can change the read-order of the markup to avoid the LHS float requirement  but that s has readability and possibly accessibility issues   However   this problem can be solved with floats given some additional markup   caveat  I don t approve of the  clearing div at that example  see here for details   All things considered  I think most of us wish there was a non-greedy width remaining in CSS3

User · Answer

I ran into the same problem and Mohits version works  If you want to keep your left-right order in the html  just try this  In my case  the left div is adjusting the size  the right div stays at width 260px   HTML   lt div class  box  gt   lt div class  left  gt Hello lt  div gt   lt div class  right  gt World lt  div gt   lt  div gt    CSS   box       height  200px      padding-right  260px          box  left       float  left      height  200px      width  100       box  right       height  200px      width  260px      margin-right  -260px      The trick is to use a right padding on the main box but use that space again by placing the right box again with margin-right

User · Answer

Unfortunately  this is not a trivial thing to solve for the general case  The easiest thing would be to add a css-style property  float  right   to your 200px div  however  this would also cause your  main -div to actually be full width and any text in there would float around the edge of the 200px-div  which often looks weird  depending on the content  pretty much in all cases except if it s a floating image    EDIT  As suggested by Dom  the wrapping problem could of course be solved with a margin  Silly me

User · Answer

To paraphrase one of my websites that does something similar    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt    lt head gt     lt style TYPE  text css  gt  lt  --   section        float  right       margin-right  210px       margin-right  10px       width  expression   document body clientWidth - 250     px        navbar       margin  10px 0      float  right      width  200px      padding  9pt 0       -- gt  lt  style gt    lt  head gt    lt body gt     lt div class  navbar  gt    This will take up the right hand side    lt  div gt     lt div class  section  gt    This will fill go to the left of the  navbar  div    lt  div gt    lt  body gt   lt  html gt

User · Answer

The method suggested by  roe and  MohitNanda work  but if the right div is set as float right   then it must come first in the HTML source  This breaks the left-to-right read order  which could be confusing if the page is displayed with styles turned off  If that s the case  it might be better to use a wrapper div and absolute positioning    lt div id  wrap  style  position relative   gt       lt div id  left  style  margin-right 201px border 1px solid red   gt left lt  div gt       lt div id  right  style  position absolute width 200px right 0 top 0 border 1px solid blue   gt right lt  div gt   lt  div gt    Demonstrated        left     right   Edit  Hmm  interesting  The preview window shows the correctly formatted divs  but the rendered post item does not  Sorry then  you ll have to try it for yourself

User · Answer

As everyone has pointed out  you ll do this by setting a float right  on the RHS content and a negative margin on the LHS   However   if you don t use a float  left  on the LHS  as Mohit does  then you ll get a stepping effect because the LHS div is still going to consume the margin d space in layout   However   the LHS float will shrink-wrap the content  so you ll need to insert a defined width childnode if that s not acceptable  at which point you may as well have defined the width on the parent   However   as David points out you can change the read-order of the markup to avoid the LHS float requirement  but that s has readability and possibly accessibility issues   However   this problem can be solved with floats given some additional markup   caveat  I don t approve of the  clearing div at that example  see here for details   All things considered  I think most of us wish there was a non-greedy width remaining in CSS3

[html] CSS two divs next to each other

Examples related to html

Examples related to css