How to place div side by side

Question

I have a main wrapper div that is set 100  width  Inside that i would like to have two divs  one that is fixed width and the other that fills the rest of the space  How do i float the second div to fill the rest of the space  Thanks for any help

User · Answer

CSS3 introduced flexible boxes  aka  flex box  which can also achieve this behavior  Simply define the width of the first div  and then give the second a flex-grow value of 1 which will allow it to fill the remaining width of the parent   container      display  flex     fixed      width  200px     flex-item      flex-grow  1      lt div class  quot container quot  gt     lt div class  quot fixed quot  gt  lt  div gt     lt div class  quot flex-item quot  gt  lt  div gt   lt  div gt   Demo   x000D   x000D  div       color   fff      font-family  Tahoma  Verdana  Segoe  sans-serif      padding  10px     container       background-color  2E4272      display flex     fixed       background-color  4F628E      width  200px     flex-item       background-color  7887AB      flex-grow  1    x000D   lt div class  container  gt       lt div class  fixed  gt Fixed width lt  div gt       lt div class  flex-item  gt Dynamically sized content lt  div gt   lt  div gt  x000D   x000D   x000D   Note that flex boxes are not backwards compatible with old browsers  but is a great option for targeting modern browsers  see also Caniuse and MDN   A great comprehensive guide on how to use flex boxes is available on CSS Tricks

User · Answer

There are many ways to do what you re asking for   Using CSS float property    x000D   x000D    lt div style  width  100   overflow  hidden   gt        lt div style  width  600px  float  left   gt  Left  lt  div gt        lt div style  margin-left  620px   gt  Right  lt  div gt   lt  div gt  x000D   x000D   x000D    Using CSS display property - which can be used to make divs act like a table    x000D   x000D   lt div style  width  100   display  table   gt       lt div style  display  table-row  gt           lt div style  width  600px  display  table-cell   gt  Left  lt  div gt           lt div style  display  table-cell   gt  Right  lt  div gt       lt  div gt   lt  div gt  x000D   x000D   x000D   There are more methods  but those two are the most popular

User · Answer

I don t know much about HTML and CSS design strategies  but if you re looking for something simple and that will fit the screen automatically  as I am  I believe the most straight forward solution is to make the divs behave as words in a paragraph  Try specifying display  inline-block    lt div style  display  inline-block  gt     Content in column A  lt  div gt   lt div style  display  inline-block  gt     Content in column B  lt  div gt    You might or might not need to specify the width of the DIVs

User · Answer

You can use CSS grid to achieve this  this is the long-hand version for the purposes of illustration    x000D   x000D  div container   x000D      display  grid  x000D      grid-template-columns  220px 20px auto  x000D      grid-template-rows  auto  x000D    x000D   x000D  div left   x000D      grid-column-start  1  x000D      grid-column-end  2  x000D      grid-row-start  row1-start x000D      grid-row-end  3  x000D      background-color  Aqua  x000D    x000D   x000D  div right   x000D      grid-column-start  3  x000D      grid-column-end  4  x000D      grid-row-start  1  x000D      grid-row-end  1  x000D      background-color  Silver  x000D    x000D   x000D  div below   x000D      grid-column-start  1  x000D      grid-column-end  4  x000D      grid-row-start  2  x000D      grid-row-end  2  x000D    x000D   lt div class  container  gt  x000D       lt div class  left  gt Left lt  div gt  x000D       lt div class  right  gt Right lt  div gt  x000D       lt div class  below  gt Below lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Or the more traditional method using float and margin   I have included a background colour in this example to help show where things are - and also what to do with content below the floated-area   Don t put your styles inline in real life  extract them into a style sheet    x000D   x000D  div left   x000D      width  200px  x000D      float  left  x000D      background-color  Aqua  x000D    x000D   x000D  div right   x000D      margin-left  220px  x000D      background-color  Silver  x000D    x000D   x000D  div clear   x000D      clear  both  x000D    x000D       lt div class  left  gt  Left  lt  div gt  x000D       lt div class  right  gt  Right  lt  div gt  x000D       lt div class  clear  gt Below lt  div gt  x000D   x000D   x000D     lt div style  width  200px  float  left  background-color  Aqua   gt  Left  lt  div gt   lt div style  margin-left  220px  background-color  Silver   gt  Right  lt  div gt   lt div style  clear  both   gt Below lt  div gt

User · Answer

If you re not tagetting IE6  then float the second  lt div gt  and give it a margin equal to  or maybe a little bigger than  the first  lt div gt  s fixed width   HTML    lt div id  main-wrapper  gt       lt div id  fixed-width  gt  lorem ipsum  lt  div gt       lt div id  rest-of-space  gt  dolor sit amet  lt  div gt   lt  div gt    CSS    main-wrapper       100       background red     fixed-width       width 100px      float left    rest-of-space       margin-left 101px             May have to increase depending on borders and margin of the fixd width div       background blue      The margin accounts for the possibility that the  rest-of-space   lt div gt  may contain more content than the  fixed-width   lt div gt    Don t give the fixed width one a background  if you need to visibly see these as different  columns  then use the Faux Columns trick

User · Answer

lt div class  container  style  width  100    gt       lt div class  sidebar  style  width  200px  float  left   gt          Sidebar      lt  div gt       lt div class  content  style  margin-left  202px   gt          content       lt  div gt   lt  div gt    This will be cross browser compatible   Without the margin-left you will run into issues with content running all the way to the left if you content is longer than your sidebar

User · Answer

Give the first div float  left  and a fixed width  and give the second div width  100   and float  left   That should do the trick  If you want to place items below it you need a clear  both  on the item you want to place below it

[html] How to place div side by side

Examples related to html

Examples related to css