How to place two divs next to each other

Question

Consider the following code    x000D   x000D   wrapper   x000D      width  500px  x000D      border  1px solid black  x000D    x000D   first   x000D      width  300px  x000D      border  1px solid red  x000D    x000D   second   x000D      border  1px solid green  x000D    x000D   lt div id  wrapper  gt  x000D       lt div id  first  gt Stack Overflow is for professional and enthusiast programmers  people who write code because they love it  lt  div gt  x000D       lt div id  second  gt When you post a new question  other users will almost immediately see it and try to provide good answers  This often happens in a matter of minutes  so be sure to check back frequently when your question is still new for the best response  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    I would like the two divs to be next to each other inside the wrapper div  In this case  the height of the green div should determine the height of the wrapper   How could I achieve this via CSS

User · Answer

Try to use flexbox model  It is easy and short to write   Live Jsfiddle  CSS    wrapper     display  flex    border  1px solid black     first       border  1px solid red     second       border  1px solid green      default direction is row  So  it aligns next to each other inside the  wrapper  But it is not supported IE9 or less than that versions

User · Answer

Having two divs    lt div id  div1  gt The two divs are lt  div gt   lt div id  div2  gt next to each other  lt  div gt    you could also use the display property    div1       display  inline-block      div2       display  inline-block      jsFiddle example here   If div1 exceeds a certain height  div2 will be placed next to div1 at the bottom  To solve this  use vertical-align top  on div2   jsFiddle example here

User · Answer

My approach    lt div class  left  gt Left lt  div gt   lt div class  right  gt Right lt  div gt    CSS    left       float  left      width  calc 100  - 200px       background  green      right       float  right      width  200px      background  yellow

User · Answer

You can sit elements next to each other by using the CSS float property    first   float  left     second   float  left      You d need to make sure that the wrapper div allows for the floating in terms of width  and margins etc are set correctly

User · Answer

In material UI and react js you can use the grid   lt Grid   container   direction  row    justify  center    alignItems  center   gt       lt Grid item xs gt         lt Paper className  classes paper  gt xs lt  Paper gt       lt  Grid gt       lt Grid item xs gt         lt Paper className  classes paper  gt xs lt  Paper gt       lt  Grid gt       lt Grid item xs gt         lt Paper className  classes paper  gt xs lt  Paper gt       lt  Grid gt    lt  Grid gt

User · Answer

x000D   x000D   wrapper   x000D  width  1200  x000D  border  1px solid black  x000D  position  relative  x000D  float  left  x000D    x000D   first   x000D  width  300px  x000D  border  1px solid red  x000D  position  relative  x000D  float  left  x000D    x000D   second   x000D  border  1px solid green  x000D  position  relative  x000D  float  left  x000D  width  500px  x000D    x000D   lt div id  wrapper  gt  x000D       lt div id  first  gt Stack Overflow is for professional and enthusiast programmers  people who write code because they love it  lt  div gt  x000D       lt div id  second  gt When you post a new question  other users will almost immediately see it and try to provide good answers  This often happens in a matter of minutes  so be sure to check back frequently when your question is still new for the best response  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Option 1  Use float left on both div elements and set a   width for both div elements with a combined total width of 100    Use box-sizing  border-box  on the floating div elements  The value border-box forces the padding and borders into the width and height instead of expanding it   Use clearfix on the  lt div id  wrapper  gt  to clear the floating child elements which will make the wrapper div scale to the correct height    clearfix after      content           visibility  hidden     display  block     height  0     clear  both      first   second    box-sizing  border-box    -moz-box-sizing  border-box    -webkit-box-sizing  border-box      wrapper       width  500px      border  1px solid black     first       border  1px solid red      float left      width 50      second       border  1px solid green      float left      width 50       http   jsfiddle net dqC8t 3381   Option 2  Use position absolute on one element and a fixed width on the other element   Add position relative to  lt div id  wrapper  gt  element to make child elements absolutely position to the  lt div id  wrapper  gt  element    wrapper       width  500px      border  1px solid black      position relative     first       border  1px solid red      width 100px     second       border  1px solid green      position absolute      top 0      left 100px      right 0      http   jsfiddle net dqC8t 3382   Option 3  Use display inline-block on both div elements and set a   width for both div elements with a combined total width of 100    And again  same as float left example  use box-sizing  border-box  on the div elements  The value border-box forces the padding and borders into the width and height instead of expanding it   NOTE  inline-block elements can have spacing issues as it is affected by spaces in HTML markup  More information here  https   css-tricks com fighting-the-space-between-inline-block-elements    first   second    box-sizing  border-box    -moz-box-sizing  border-box    -webkit-box-sizing  border-box      wrapper       width  500px      border  1px solid black      position relative      first       width 50       border  1px solid red      display inline-block      second       width 50       border  1px solid green      display inline-block      http   jsfiddle net dqC8t 3383   A final option would be to use the new display option named flex  but note that browser compatibility might come in to play   http   caniuse com  feat flexbox  http   www sketchingwithcss com samplechapter cheatsheet html

User · Answer

It is very easy -  you could do it the hard way   x000D   x000D   clearfix after   x000D     content        x000D     visibility  hidden  x000D     display  block  x000D     height  0  x000D     clear  both  x000D    x000D   x000D   first   second  x000D    box-sizing  border-box  x000D    -moz-box-sizing  border-box  x000D    -webkit-box-sizing  border-box  x000D    x000D   x000D   wrapper   x000D      width  500px  x000D      border  1px solid black  x000D    x000D   first   x000D      border  1px solid red  x000D      float left  x000D      width 50   x000D    x000D   second   x000D      border  1px solid green  x000D      float left  x000D      width 50   x000D    x000D   lt div id  first  gt Stack Overflow is for professional and enthusiast programmers  people who write code because they love it  lt  div gt  x000D       lt div id  second  gt When you post a new question  other users will almost immediately see it and try to provide good answers  This often happens in a matter of minutes  so be sure to check back frequently when your question is still new for the best response  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    or the easy way  x000D   x000D   wrapper   x000D    display  flex  x000D    border  1px solid black  x000D    x000D   first   x000D      border  1px solid red  x000D    x000D   second   x000D      border  1px solid green  x000D    x000D   lt div id  wrapper  gt  x000D       lt div id  first  gt Stack Overflow is for professional and enthusiast programmers  people who write code because they love it  lt  div gt  x000D       lt div id  second  gt When you post a new question  other users will almost immediately see it and try to provide good answers  This often happens in a matter of minutes  so be sure to check back frequently when your question is still new for the best response  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    There s also like a million other ways  But I d just with the easy way  I would also like to tell you that a lot of the answers here are incorrect But both the ways that I have shown at least work in HTML 5

User · Answer

Add float left  property in both divs  Add display inline-block  property   Add display flex  property  in parent div

User · Answer

This is the right CSS3 answer  Hope this helps you somehow now  D I really recommend you to read the book  https   www amazon com Book-CSS3-Developers-Future-Design dp 1593272863 Actually I have made this solution from reading this book now   D   x000D   x000D   wrapper  x000D    display  flex  x000D    flex-direction  row  x000D    border  1px solid black  x000D    x000D   first  x000D    width  300px  x000D    border  1px solid red  x000D    x000D   second  x000D    border  1px solid green  x000D    x000D   lt div id  wrapper  gt  x000D       lt div id  first  gt Stack Overflow is for professional and enthusiast programmers  people who write code because they love it  lt  div gt  x000D       lt div id  second  gt When you post a new question  other users will almost immediately see it and try to provide good answers  This often happens in a matter of minutes  so be sure to check back frequently when your question is still new for the best response  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try to use below code changes to place two divs in front of each other    wrapper     width  500px    border  1px solid black    display flex      JSFiddle link

User · Answer

here is the solution    wrapper       width  500px      border  1px solid black      overflow  auto     so the size of the wrapper is alway the size of the longest content       first       float  left      width  300px      border  1px solid red     second       border  1px solid green      margin  0 0 0 302px     considering the border you need to use a margin so the content does not float under the first div       your demo updated   http   jsfiddle net dqC8t 1

User · Answer

Float one or both inner divs   Floating one div    wrapper       width  500px      border  1px solid black      overflow  hidden     will contain if  first is longer than  second       first       width  300px      float left     add this        border  1px solid red     second       border  1px solid green      overflow  hidden     if you don t want  second to wrap below  first        or if you float both  you ll need to encourage the wrapper div to contain both the floated children  or it will think it s empty and not put the border around them  Floating both divs    wrapper       width  500px      border  1px solid black      overflow  hidden     add this to contain floated children       first       width  300px      float left     add this        border  1px solid red     second       border  1px solid green      float  left     add this

[css] How to place two divs next to each other?

Examples related to css

Examples related to html