Display Two div s Side-by-Side

Question

My goal is to display two  lt div gt s side-by-side with the content from both  lt div gt s aligned at the top  I do not want long text in the second  lt div gt  to wrap underneath the first one   Finally  I do not want to set the width of the second  lt div gt  because I need the markup to work in different widths   Sample markup is below and at http   jsfiddle net rhEyM    CSS   left-div       float  left      width  100px      height  20px      margin-right  8px      background-color  linen     right-div       float  left      margin-left  108px      background-color  skyblue       HTML   lt div class  left-div  gt       amp nbsp   lt  div gt   lt div class  right-div  gt      My requirements are  lt b gt  A  lt  b gt  Content in the two divs should line     up at the top   lt b gt  B  lt  b gt  Long text in right-div should not wrap     underneath left-div  and  lt b gt  C  lt  b gt  I do not want to specify a     width of right-div  I don t want to set the width of right-div     because this markup needs to work within different widths   lt  div gt

User · Answer

Try this    http   jsfiddle net TpqVx     left-div       float  left      width  100px        height  20px        margin-right  8px      background-color  linen     right-div        margin-left  108px      background-color  lime           lt div class  left-div  gt       amp nbsp   lt  div gt   lt div class  right-div  gt      My requirements are  lt b gt  A  lt  b gt  Content in the two divs should line up at the top   lt b gt  B  lt  b gt  Long text in right-div should not wrap underneath left-div  and  lt b gt  C  lt  b gt  I do not want to specify a width of right-div  I don t want to set the width of right-div because this markup needs to work within different widths   lt  div gt   lt div style  clear both   gt  amp nbsp  lt  div gt    Hints      Just use float left in your left-most div only  No real reason to use height  but anyway    Good practice to use  lt div  clear both  gt  amp nbsp  lt  div gt  after your last div

User · Answer

Try to Use Flex as that is the new standard of html5   http   jsfiddle net maxspan 1b431hxm    lt div id  row1  gt       lt div id  column1  gt I am column one lt  div gt       lt div id  column2  gt I am column two lt  div gt   lt  div gt    row1      display flex      flex-direction row  justify-content  space-around      column1      display flex      flex-direction column        column2      display flex      flex-direction column

User · Answer

I removed the float from the second div to make it work   http   jsfiddle net rhEyM 2

[html] Display Two <div>s Side-by-Side

Examples related to html

Examples related to css

Examples related to css-float